Welcome 微信登录

首页 / 脚本样式 / JavaScript / jquery右下角自动弹出可关闭的广告层

右下角弹出层后,会在一定时间后自动隐藏。
html代码:

<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><title>jquery右下角自动弹出关闭层</title><base target="_blank"/><script type="text/javascript" src="jquery/jquery-1.11.2.min.js"></script><style type="text/css">* {margin: 0px;padding: 0px;}a {color:black;}#keleyislide {width: 300px;height: 200px;border: 1px solid #000;position: fixed;bottom: 2px;right: 2px;display: none;background-color: White;z-index:9999;}#keleyislide a {position: absolute;top: 8px;right: 8px;font-size: 12px;text-decoration: none;color: Blue;}#keleyislide h2 {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: 1px solid #000;}</style></head><body><div style="background-color:Green; width:100%;height:150px;">keleyi.com</div><div style="background-color:Red; width:100%;height:150px;">欢迎</div><div style="background-color:Yellow; width:100%;height:150px;"> 一定时间后弹出层会自动隐藏</div><div style="background-color:Silver; width:100%;height:150px;">计划</div><div style="background-color:Aqua; width:100%;height:150px;">aaaa</div><div style="background-color:Fuchsia; width:100%;height:150px;">jihua</div><div style="background-color:Green; width:100%;height:150px;">jb51.net</div><div style="background-color:Blue; width:100%;height:150px;">bbbb</div><div style="background-color:Olive; width:100%;height:150px;">欢迎光临</div><div style="background-color:Green; width:100%;height:150px;">randomvisit</div><div style="background-color:Purple; width:100%;height:150px;">cccc</div><div style="background-color:Green; width:100%;height:150px;">B</div><div style="background-color:Lime; width:100%;height:150px;">myslider</div><div style="background-color:Orange; width:100%;height:150px;">Jihua</div><div id="reshow">你快回来</div><div id="keleyislide"><a href="javaScript:void(0)" id="close" target="_self">关闭</a><span style=" line-height:50px;">右下角滑动弹出可重现层<br /></span></div><script type="text/javascript">function Jihua_Cnblogs_Com() { $("#kel"+"eyislide").slideDown("slow"); $("#reshow").hide(); }function KeleyiAutoHide() { $("#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>
以上所述就是本文的全部内容了,希望大家能够喜欢。