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 相关文章推荐
完整显示当前日期和时间的JS代码
Sep 17 Javascript
javascript中如何处理引号编码&amp;#034;
Aug 15 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
vue实现固定位置显示功能
May 30 Javascript
JS实现容器模块左右拖动效果
Jan 14 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 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对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
统计出现最多的字符次数的js代码
2010/12/03 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
python函数参数*args**kwargs用法实例
2013/12/04 Python
python里将list中元素依次向前移动一位
2014/09/12 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
Python列表元素常见操作简单示例
2019/10/25 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
Python数据存储之 h5py详解
2019/12/26 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
python 如何上传包到pypi
2020/12/24 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
业务员简历自我评价
2014/03/06 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
招标承诺书
2014/08/30 职场文书
培训督导岗位职责
2015/04/10 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技