效果体验：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. KnockoutJS 3.X API 第七章 其他技术(1) 加载和保存JSON数据

    Knockout允许您实现复杂的客户端交互性,但几乎所有Web应用程序还需要与服务器交换数据,或至少将本地存储的数据序列化. 最方便的交换或存储数据的方式是JSON格式 - 大多数Ajax应用程序今天 ...

  2. CSS系列：CSS表格样式

    1. 设置单元格的边框 border-collapse: collapse; 2. 边框的分离 对table使用CSS实现cellspacing的属性border-spacing. border-sp ...

  3. 配置 linux-bridge mechanism driver - 每天5分钟玩转 OpenStack（77）

    本节开始我们将学习 Linux Bridge 如何实现 Neutron 的各种功能.首先需要配置 linux-bridge mechanism driver. Neutorn ML2 plugin 默 ...

  4. iOS开发之使用Runtime给Model类赋值

    本篇博客算是给网络缓存打个基础吧,本篇博客先给出简单也是最容易使用的把字典转成实体类的方法,然后在给出如何使用Runtime来给Model实体类赋值.本篇博客会介绍一部分,主要是字典的key与Mode ...

  5. 修改ibdata1大小的验证以及如何使用mysqld_multi管理多实例

    修改ibdata1大小的验证 ibdata是共享表空间,在MySQL初始化的时候就生成了. 但很多童鞋会看到网上各种大神的调优建议,在MySQL已经初始化的情况下,修改配置文件中innodb_data ...

  6. android 如何获取手机的图片、视频、音乐

    在android 开发中,很多时候,我们会需要调用到用户本机的照片.视频或者是音乐让用户选择,来进行我们APP对应的操作. button.setOnClickListener(new OnClickL ...

  7. 总结JavaScript事件机制

    JavaScript事件模型 在各种浏览器中存在三种事件模型: 原始事件模型 , DOM2事件模型 , IE事件模型. 其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE ...

  8. ssh整合问题总结--使用HibernateTemplate实现数据分页展示

    在进行大量的数据展示时,必须要使用分页查询,第一次使用在SSH框架整合中使用分页查询,遇到了一些问题,下面以我练习的项目为例详细介绍,如何在Spring+hibernate(+action)的环境下完 ...

  9. 【JUC】JDK1.8源码分析之ThreadPoolExecutor（一）

    一.前言 JUC这部分还有线程池这一块没有分析,需要抓紧时间分析,下面开始ThreadPoolExecutor,其是线程池的基础,分析完了这个类会简化之后的分析,线程池可以解决两个不同问题:由于减少了 ...

  10. WebSocket 介绍(二)-WebSocket API

    这一章介绍如何用WebSocket API来控制协议和创建应用,运用http://websocket.org 提供的现有WebSocket服务器,我们可以收发消息.创建一些简单的WebSocket应用 ...