jquery右下角自动弹出可关闭的广告层
右下角弹出层后,会在一定时间后自动隐藏。
html代码:
<!DOCTYPEHTML>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metacharset="UTF-8">
<title>jquery右下角自动弹出关闭层</title><basetarget="_blank"/>
<scripttype="text/javascript"src="jquery/jquery-1.11.2.min.js"></script>
<styletype="text/css">
*{
margin:0px;
padding:0px;
}
a{color:black;
}
#keleyislide{
width:300px;
height:200px;
border:1pxsolid#000;
position:fixed;
bottom:2px;
right:2px;
display:none;
background-color:White;
z-index:9999;
}
#keleyislidea{
position:absolute;
top:8px;
right:8px;
font-size:12px;
text-decoration:none;
color:Blue;
}
#keleyislideh2{
font-size:24px;
text-align:center;
font-family:"微软雅黑";
}
#reshow{
position:fixed;
right:2px;
bottom:2px;
font-size:12px;
display:none;
background-color:White;
cursor:pointer;
border:1pxsolid#000;
}
</style>
</head>
<body>
<divstyle="background-color:Green;width:100%;height:150px;">keleyi.com</div>
<divstyle="background-color:Red;width:100%;height:150px;">欢迎</div>
<divstyle="background-color:Yellow;width:100%;height:150px;">一定时间后弹出层会自动隐藏
</div>
<divstyle="background-color:Silver;width:100%;height:150px;">计划</div>
<divstyle="background-color:Aqua;width:100%;height:150px;">aaaa</div>
<divstyle="background-color:Fuchsia;width:100%;height:150px;">jihua</div>
<divstyle="background-color:Green;width:100%;height:150px;">jb51.net</div>
<divstyle="background-color:Blue;width:100%;height:150px;">bbbb</div>
<divstyle="background-color:Olive;width:100%;height:150px;">欢迎光临</div>
<divstyle="background-color:Green;width:100%;height:150px;">randomvisit</div>
<divstyle="background-color:Purple;width:100%;height:150px;">cccc</div>
<divstyle="background-color:Green;width:100%;height:150px;">B</div>
<divstyle="background-color:Lime;width:100%;height:150px;">myslider</div>
<divstyle="background-color:Orange;width:100%;height:150px;">Jihua</div>
<divid="reshow">你快回来</div>
<divid="keleyislide">
<ahref="javaScript:void(0)"id="close"target="_self">关闭</a>
<spanstyle="line-height:50px;">右下角滑动弹出可重现层<br/></span>
</div>
<scripttype="text/javascript">
functionJihua_Cnblogs_Com(){$("#kel"+"eyislide").slideDown("slow");$("#reshow").hide();}
functionKeleyiAutoHide(){$("#ke"+"leyislide").slideUp("slow");$("#reshow").show();}
$(document).ready(function(){
setTimeout(function(){
Jihua_Cnblogs_Com();
},1000)
setTimeout(function(){KeleyiAutoHide();},9000)
$("#close").click(function(){
KeleyiAutoHide();
})
$("#reshow").mouseover(function(){
Jihua_Cnblogs_Com();})
})
</script>
</body>
</html>
以上所述就是本文的全部内容了,希望大家能够喜欢。