原生js右下角浮动层特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是原生js右下角浮动层特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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>原生js右下角浮动层效果</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</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>

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font-family:Arial,Helvetica,sans-serif;}
/* extbkbox */
.extbkbox{width:280px;background:#FFFFFF;border:solid 1px #c0c0c0;position:fixed !Important;bottom:0;float:left;position:absolute;z-index:1000;}
*html .extbkbox{top:expression(offsetParent.scrollTop+20);}
.extbkbox{right:0px;}
.extbkboxm{clear:both;height:30px;font-size:14px;color:#FFFFFF;font-weight:bold;line-height:30px;background:#FF6600;border-bottom:solid 1px #c0c0c0;}
.extbkboxm .extmore{float:right;cursor:pointer;}
.extbkboxb{font-size:12px;clear:both;height:auto;padding:10px 0px;}
.extbkboxnar{color:#f00;display:block;width:40px;height:30px;background:url(../images/tanchu_05.gif) no-repeat center center;}
.extbkboxnarove{color:#00f;width:40px;height:30px;background:url(../images/tanchu_03.gif) no-repeat center center;display:block;}
.extbkboxb ul{list-style:none;margin:0px;padding:0px;}
.extbkboxb ul li{width:255px;height:25px;line-height:25px;font-family:"宋体";font-family:12px;color:#333333;padding-left:25px;background:url(../images/tanchu_10.gif) no-repeat 10px center;}
.extbkboxb ul li a{color:#333333;text-decoration:none;}
.extbkboxb ul li a:hover{color:#990000;text-decoration:underline;}

附件:下载该文件资源,减少时间成本(增值服务)