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 24 Javascript
JQuery 初体验(建议学习jquery)
Apr 25 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
JS实现纵向轮播图(初级版)
Jan 18 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 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
destoon公司主页模板风格的添加方法
2014/06/20 PHP
微信自定义分享php代码分析
2016/11/24 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
python去掉行尾的换行符方法
2017/01/04 Python
简单的python后台管理程序
2017/04/13 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
python自动生成model文件过程详解
2019/11/02 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
Python timeit模块原理及使用方法
2020/10/10 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
退伍老兵事迹材料
2014/01/31 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
人事经理岗位职责
2014/04/28 职场文书
学习十八大的心得体会
2014/09/12 职场文书
代领报检证委托书范本
2014/10/11 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
利用python调用摄像头的实例分析
2021/06/07 Python
ORACLE查看当前账号的相关信息
2021/06/18 Oracle