原生js右下角浮动层效果,可以最大化最小化的浮动层效果



114 455 152



特效描述:右下角浮动层 最大化最小化 浮动层效果,右下角弹出效果,可以最大化最小化的效果

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

2. HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>时创新增内容</title>
</head>
<body style="height:1200px;">
<div id="extbkbox" class="extbkbox" style="display:block;">
	<div class="extbkboxm">
		<strong style="float:left;padding-left:10px;">时创新增内容</strong> 
		<div class="extmore">
			<span class="extbkboxnar" id="extbkboxnar" onclick="extbkboxnar();"></span>
		</div>
	</div>
	<div class="extbkboxb" id="extbkboxb" style="display:block;">
		<ul>
			<li><a href="#">时创新增内容时创新增内容容时创新增内容</a></li>
			<li><a href="#">时创新增内容时创新增内容容时创新增内容</a></li>
			<li><a href="#">时创新增内容时创新增内容容时创新增内容</a></li>
			<li><a href="#">时创新增内容时创新增内容容时创新增内容</a></li>
			<li><a href="#">时创新增内容时创新增内容容时创新增内容</a></li>
			<li><a href="#">时创新增内容时创新增内容容时创新增内容</a></li>
		</ul>
	</div>
</div>
<script type="text/javascript">
function extbkboxnar(){
	var narrowmen = document.getElementById("extbkboxnar");
	var narrowbox = document.getElementById("extbkboxb");
	if (narrowbox.style.display == "block"){
		narrowbox.style.display = "none";
		narrowmen.className = "extbkboxnarove";
		}
		else{
		narrowbox.style.display = "block";
		narrowmen.className = "extbkboxnar";
		}		
	}
function extbkboxove(str){document.getElementById("extbkbox").style.display = "none";}
</script>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 右键菜单 收缩导航菜单 图片广告 文字提示框 文字收缩展开 对联广告 提示框/弹出层 图片收缩展开 layer 叠加浮动层 lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 悬浮浮动漂浮 弹出层拖动 窗口提示框 收缩收起展开 浮动提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到