效果体验：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>

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

jquery右下角自动弹出关闭层的更多相关文章

  1. jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

    本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...

  2. jquery layer插件弹出弹层 结构紧凑，功能强大

    /* 去官方网站下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 事件触发炸弹层可以自由绑定,例如: $('# ...

  3. jquery弹出关闭遮罩层实例

    jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...

  4. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  5. css解决滚动弹出层里边的滚动条时带动了整个页面滚动的问题

    之前一个朋友问我说他的一个弹出层在弹出后,上下滑动弹出层或遮罩层,结果遮罩层下边的整个页面(页面超出了一屏)也跟着滚动了,他说他不想要这样的效果,我说你把弹出层和遮罩层的position:fixed设 ...

  6. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  7. 关闭自动弹出照片自动弹出iTunes以及关闭手机照片流

    关闭自动弹出照片自动弹出iTunes以及关闭手机照片流 如何阻止iPhone连接Mac后自动弹出照片? 时间:2015/6/18 17:07:15来源:本站原创作者:Chenjh我要评论 很多新 iP ...

  8. jQuery点击弹出层，弹出模态框，点击模态框消失

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  9. 关闭Eclipse中自动弹出console的功能

    当我们使用Eclipse编写代码的时候,一般都会使界面最大化,如果这时tomcat服务器处在运行的状态,那么当后台有打印内容,比如日志输出,代码程序报错输出时,console就会自动弹出,很不方便. ...

随机推荐

  1. .NET Memory Profiler 查看内存使用情况

    1 简介 .Net Memory Profiler(以下简称Profiler):专门针对于.NET程序,功能最全的内存分析工具,最大的特点是具有内存动态分析(Automatic Memory Anal ...

  2. DataGrid中的常用属性

    DataGrid中的常用属性 $('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',w ...

  3. PHP SESSION机制,从存储到读取

    PHP中,如果要获取SESSION数据,必须要有对应的session_id,session_id的获取方式有两种 1.基于客户端的cookie 2.基于url 先说第一种情况,基于客户端的cookie ...

  4. Leetcode-190 Reverse Bits

    #190. Reverse Bits Reverse bits of a given 32 bits unsigned integer. For example, given input 432615 ...

  5. TSQL Merge On子句和When not matched 语义理解

    Merge 的On子句指定Match condition,When子句指定过滤条件,如果Source Table和Targe Table匹配的上,很好理解:如果匹配不上,必须深入理解不匹配的条件,否则 ...

  6. js高程读书笔记（第4章--变量、作用域和内存）

    JavaScript变量松散类型的本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何总数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变. 1. ...

  7. java笔试题

    下面有关JVM内存,说法错误的是? A.程序计数器是一个比较小的内存区域,用于指示当前线程所执行的字节码执行到了第几行,是线程隔离的 B.Java方法执行内存模型,用于存储局部变量,操作数栈,动态链接 ...

  8. BFC之清除浮动篇&clear

    我们在日常代码生活中,或多或少会利用浮动来布局,例如导航布局,如下图所示: 但是,我们在实现的时候,经常会遇到父元素“塌陷”以及清除浮动问题.例如 <!DOCTYPE html> < ...

  9. C# 一个页面，多个Updatepannel，多个Timer

    这几天在搞一个项目,其中一个页面里面有好几组数据要定时刷新,但是,每一组数据要刷新的时间不一样,所以就需要用到多个定时器.本人刚工作不久,对Js 的Ajax不太了解,反而对微软的那个Ajax相对了解一 ...

  10. Objective-C中的单例模式

    ​    ​单例模式算是设计模式中比较简单的一种吧,设计模式不是只针对某种编程语言,在C++, Java, PHP等其他OOP语言也有设计模式,笔者初接触设计模式是通过<漫谈设计模式>了解 ...