效果体验：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. salesforce 零基础学习（四十八）自定义列表分页之Pagination基类封装 ※※※

    我们知道,salesforce中系统标准列表页面提供了相应的分页功能,如果要使用其分页功能,可以访问http://www.cnblogs.com/zero-zyq/p/5343287.html查看相关 ...

  2. CTE 递归查询

    使用CTE进行递归查询,能够实现对层次结构的数据的快速访问,非常有用. TSql CTE 递归原理探究 TSql 分层和递归查询 1,CTE的递归结构 递归查询的结构包括两部分:起始点和迭代公式. 使 ...

  3. 专业上的常用的工具和类库集 By 老衣

    Visual Studio 2013 扩展 CodeMaid: 可快速整理代码文件,清理不必要的代码和杂乱的格式.并在开发时实时提供代码复杂度的报告,以便帮助开发人员降低代码复杂度.提高代码质量. C ...

  4. Entity Framework Code First添加修改及删除单独实体

    对于一个单独实体的通常操作有3种:添加新的实体.修改实体以及删除实体. 1.添加新的实体 Entity Framework Code First添加新的实体通过调用DbSet.Add()方法来实现. ...

  5. pipedata3d User Guide

    pipedata3d User Guide 1. Introduction 在管道设计过程中,会使用到大量的标准,如ASME,DIN,GB,CB,HG,SH等等.管道设计人员在设计过程中,需要翻阅相关 ...

  6. float实例讲解

    float实例讲解 float是个强大的属性,在实际前端开发过程中,人们经常拿它来进行布局,但有时,使用的不好,也麻烦多多啊. 比如,现在我们要实现一个两列布局,左边的列,宽度固定:右边的列,宽度自动 ...

  7. 自己使用的一个.NET轻量开发结构

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIgAAABFCAIAAAAerjlvAAAE2UlEQVR4nO2a3U/bVhiH+bdyPaqpmx

  8. dapper-dot-net用法及其扩展系列

    dapper-dot-net用法及其扩展系列 虽然已经一段时间没写.net了,但是昨天看了下dapper和Dapper-Extensions在github仍然有更新,他们的受欢迎程度可想而知.所以想把 ...

  9. MongoDB-基础-limit-skip-sort

    MongoDB Limit() 方法 如果你需要在MongoDB中读取指定数量的数据记录,可以使用MongoDB的Limit方法,limit()方法接受一个数字参数,该参数指定从MongoDB中读取的 ...

  10. Sql Server之使用T_SQL创建，修改，查看数据库信息

    一.使用Transact_SQL创建数据库 Transact_SQL语法如下:  create database database_name   [ on     [primary]  [<fi ...