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 option删除代码集合
Nov 12 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
悬浮数字的实现案例
Feb 19 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
简单学习vue指令directive
Nov 03 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
vue.js实现回到顶部动画效果
Jul 31 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
python 实现矩阵填充0的例子
2019/11/29 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
中专毕业生自荐信
2013/11/16 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
初中科学教学反思
2014/01/21 职场文书
统计专业自荐书
2014/07/06 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
七年级地理教学计划
2015/01/22 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫
python垃圾回收机制原理分析
2022/04/13 Python