效果体验：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静态代理与动态代理

    原文链接:http://www.orlion.ga/207/ 一.代理模式 代理模式是经常用到的设计模式,代理模式是给指定对象提供代理对象.由代理对象来控制具体对象的引用. 代理模式涉及到的角色: 抽 ...

  2. py2exe使用中遇到的几个问题

    问题: 在使用py2exe对所写的python脚本打包成.exe可执行程序时,遇到两个问题: 问题1: RuntimeError: maximum recursion depth exceeded w ...

  3. EF循环迭代导致如此严重的性能丢失，你知道？

    前言 在工作当中呢,没怎么用到过EF,所以为了遗忘这一部分知识,偶尔会去写写小的demo,偶然机会在EF循环迭代中发现居然影响性能这么严重,当我们在用时或许大概也许可能都曾这样写过,但是你注意到了吗, ...

  4. DOM扩展-Selectors API(选择符 API)、元素遍历

    DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...

  5. Android获取可存储文件所有路径

    引言:大家在做app开发的时候,基本都会保存文件到手机,android存储文件的地方有很多,不像ios一样,只能把文件存储到当前app目录下,并且android手机由于厂家定制了rom,sdcard的 ...

  6. Ajax JQuery HTML 提交上传文件File HTML+ Ajax+ASP.NET+ WebService

    起因:公司最近有些项目用到了HTML+WebService的组合,发现访问速度等都快了许多,但是由于通过Ajax只能应付一些简单的文字类的传输,上传文件就捉襟见肘了,如果一直引用第三方的swf之类上传 ...

  7. codefordream 关于js中级训练

    中级训练接着就紧锣密鼓的开始了. 首先是关于变量,变量的作用是给一个数据值标注名称. 注:JavaScript中变量名,函数名,参数名的命名规范:至少由字母,下划线,美元符号,数字其中的一种组成,但不 ...

  8. 【记录】AutoMapper Project To OrderBy Skip Take 正确写法

    AutoMapper:Queryable Extensions 示例代码: using (var context = new orderEntities()) { return context.Ord ...

  9. Word基础

    1.页面设置 默认大小A4,长宽比0.618 页面布局 2.字体设置 选择要设置的字体->右键->字体 3.选择性粘贴 4.段落设置 选择文字->右键->段落 5.表格 =SU ...

  10. java基础--java.util.Date类型小结

    首先先来了解一下Date数据类型: . Date类型通常要和另一个 java.text.SimpleDateFormat类联合使用. 把long-->Date: public Date(long ...