你的位置:首页 > Java教程

[Java教程]jquery右下角自动弹出关闭层


效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/36.htm

右下角弹出层后,会在一定时间后自动隐藏。第一版本:http://www.cnblogs.com/jihua/archive/2012/10/10/youxiajiao.html

html代码:

<!DOCTYPE HTML><html ="http://www.w3.org/1999/xhtml"><head>  <meta charset="UTF-8">  <title>jquery右下角自动弹出关闭层-柯乐义</title><base target="_blank"/>  <meta name="keywords" content="keleyi.com" />  <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/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;"><a href="http://keleyi.com/a/bjae/t5t54xly.htm">原文</a> <a href="http://keleyi.com">首页</a> <a href="http://keleyi.com/keleyi/phtml/">特效库</a>  <a href="http://hovertree.com">HoverTree</a> 一定时间后弹出层会自动隐藏  </div>  <div style="background-color:Silver; width:100%;height:150px;">计划</div>  <div style="background-color:Aqua; width:100%;height:150px;">柯乐义</div>  <div style="background-color:Fuchsia; width:100%;height:150px;">jihua</div>  <div style="background-color:Green; width:100%;height:150px;">hovertree.com</div>  <div style="background-color:Blue; width:100%;height:150px;">cnblogs</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;">jihua.cnblogs.com</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 />keleyi.com</span>    <h2>柯乐义 教程</h2>  </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(); //keleyi.com       })    })  </script></body></html>

 

前端资源:http://www.cnblogs.com/jihua/p/webfront.html