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 相关文章推荐
Cookie 小记
Apr 01 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
微信小程序实现自定义底部导航
Nov 18 Javascript
类和原型的设计模式之复制与委托差异
Jul 07 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
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
phpinfo的知识点总结
2019/10/10 PHP
js 金额文本框实现代码
2012/02/14 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
Python的设计模式编程入门指南
2015/04/02 Python
python中global用法实例分析
2015/04/30 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
python实现自动登录后台管理系统
2018/10/18 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
python基于event实现线程间通信控制
2020/01/13 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
nohup的用法
2014/08/10 面试题
2014年国庆节寄语
2014/09/19 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
Python中time与datetime模块使用方法详解
2022/03/31 Python
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL