jquery右下角自动弹出可关闭的广告层


Posted in Javascript onMay 08, 2015

右下角弹出层后,会在一定时间后自动隐藏。

html代码:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>jquery右下角自动弹出关闭层</title><base target="_blank"/>
  <script type="text/javascript" src="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;"> 一定时间后弹出层会自动隐藏
  </div>
  <div style="background-color:Silver; width:100%;height:150px;">计划</div>
  <div style="background-color:Aqua; width:100%;height:150px;">aaaa</div>
  <div style="background-color:Fuchsia; width:100%;height:150px;">jihua</div>
  <div style="background-color:Green; width:100%;height:150px;">3water.com</div>
  <div style="background-color:Blue; width:100%;height:150px;">bbbb</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;">cccc</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 /></span>
  </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();       })
    })
  </script>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 Javascript
React forwardRef的使用方法及注意点
Jun 13 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 #Javascript
JavaScript实现自动变换表格边框颜色
May 08 #Javascript
JavaScript基于setTimeout实现计数的方法
May 08 #Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 #Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 #Javascript
jquery实现图片左右切换的方法
May 07 #Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 #Javascript
You might like
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
python WindowsError的错误代码详解
2017/07/23 Python
python连接数据库的方法
2017/10/19 Python
学习和使用python的13个理由
2019/07/30 Python
python sqlite的Row对象操作示例
2019/09/11 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
django中related_name的用法说明
2020/05/20 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
怎样创建、运行java程序
2014/08/01 面试题
资助贫困学生倡议书
2014/05/16 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
公司门卫岗位职责
2015/04/13 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
浅谈Python协程asyncio
2021/06/20 Python