jquery右下角自动弹出关闭层

浏览数：21 / 时间：2015年06月09日

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

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

html代码：

<!DOCTYPE HTML>
<html xmlns="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>