效果体验：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. Java 的设计模式之一装饰者模式

    刚开始接触装饰者的设计模式,感觉挺难理解的,不够后来花了一个晚上的时间,终于有头绪了 装饰者设计模式:如果想对已经存在的对象进行装饰,那么就定义一个类,在类中对已经有的对象进行功能的增强或添加另外的行 ...

  2. 数据结构与算法JavaScript (三) 链表

    我们可以看到在javascript概念中的队列与栈都是一种特殊的线性表的结构,也是一种比较简单的基于数组的顺序存储结构.由于javascript的解释器针对数组都做了直接的优化,不会存在在很多编程语言 ...

  3. Pipedata3d - Welding Neck Flange

    Pipedata3d - Welding Neck Flange eryar@163.com Abstract. Pipedata3d show piping component data in ta ...

  4. Web APi之Web Host消息处理管道（六）

    前言 我们知道Web API本身是无法提供请求-响应的机制,它是通过Web Host以及Self Host的寄宿的宿主方式来提供一个请求-响应的运行环境.二者都是将请求和响应抽象成HttpRespon ...

  5. 关于Checbox的操作,已选,未选,判断

    checkbox: $("#chk1").attr("checked",'');//不打勾                 $("#chk2" ...

  6. T-Sql（七）用户权限操作（grant）

    一般数据库的权限操作我们很少用,除非一些大型的项目,需要给数据库配置不同的用户及权限,防患于未然,今天我们就来了解下t-sql中配置用户权限操作. 先看示例代码: --创建登录名 create log ...

  7. 使用Spire.Doc来转换文本

    使用Spire.Doc来转换文本 前段时间,我为不熟悉这个产品的读者们写了一篇关于我对 Spire.Doc的初识印象.Spire.Doc是一个专业的Word .NET库,它是专门为开发人员设计的用来快 ...

  8. 用jekyll制作高大上的网站（二）——实际应用

    最近公司要制作个文档库,直接就可以将jekyll应用到实际中. 模版使用了Jekyll Clean,这么模版相对内部简单一点,学习成本不会很大,而复杂的Minimal Mistakes就当作参考. 模 ...

  9. 相克军_Oracle体系_随堂笔记008-存储结构

    控制文件.数据文件.日志文件    放在存储上.   参数文件:数据库启动时读取,并不关闭,但是启动过后丢了也没事.一般放在服务器上. $ORACLE_HOME/dbs下   备份文件{     控制 ...

  10. C# 将内容写入txt文档

    <1>  FileStream fs = new FileStream(@"D:\text.txt", FileMode.Append); StreamWriter s ...