1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style>
  7.          * {
  8.              margin: 0;
  9.              padding: 0;
  10.          }
  11.          .site-nav {
  12.              height: 30px;
  13.              background-color: #ccc;
  14.          }
  15.          .top-banner {
  16.              background-color: orange;
  17.          }
  18.          .w {
  19.              width: 1200px;
  20.              height: 80px;
  21.              background-color: pink;
  22.              margin: 0 auto;
  23.              position: relative;
  24.          }
  25.          .search {
  26.              width: 1200px;
  27.              height: 80px;
  28.              background-color: lemonchiffon;
  29.              margin: 0 auto;
  30.          }
  31.          a {
  32.              position: absolute;
  33.              top: 10px;
  34.              right: 10px;
  35.              width: 25px;
  36.              height: 25px;
  37.              text-align: center;
  38.              line-height: 25px;
  39.              background-color: #000;
  40.              color: #fff;
  41.              text-decoration: none;
  42.  
  43.          }
  44.      </style>
  45.  </head>
  46.  <body>
  47.      <div class="site-nav"></div>
  48.      <div class="top-banner" style="opacity: 1">
  49.          <div class="w">
  50.              <a href="#">×</a>
  51.          </div>
  52.      </div>
  53.      <div class="search"></div>
  54.  
  55.      <script>
  56.          //获取事件源
  57.          var topBanner = document.getElementsByClassName("top-banner")[0];
  58.          var a = topBanner.children[0].firstElementChild || topBanner.children[0].firstChild;
  59.          //定义定时器
  60.          var timer = null;
  61.          a.onclick = function(){
  62.              timer = setInterval(function(){
  63.                  topBanner.style.opacity -=.1;
  64.                  if (topBanner.style.opacity < 0) {
  65.                      topBanner.style.display = "none";
  66.                      clearInterval(timer);
  67.                  }
  68.              },50);
  69.          }
  70.      </script>
  71.  
  72.  </body>
  73.  </html>

javascript 模拟京东关闭广告栏的更多相关文章

  1. 项目总结15：JavaScript模拟表单提交(实现window.location.href-POST提交数据效果)

    JavaScript模拟表单提交(实现window.location.href-POST提交数据效果) 前沿 1-在具体项目开发中,用window.location.href方法下载文件,因windo ...

  2. Javascript模拟继承（赠送.net吐槽一段）

    首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...

  3. 用原生javascript模拟经典FC游戏公路争霸

    #用原生javascript模拟经典FC游戏公路争霸 前几天看了园子里面的随笔 [原生javascript开发仿微信打飞机小游戏](http://www.cnblogs.com/Mr-Nobody/p ...

  4. [原创]Javascript模拟“类”的综合实现方式以及部分细节【截至ES6】

    [原创]Javascript模拟“类”的综合实现方式以及部分细节[截至ES6] 前言   最近几个旧项目里使用的图片编辑插件出现Bug, 经Review 后确定需要在其内外均做些改动,但是头疼的发现部 ...

  5. JavaScript 模拟键盘事件

    JavaScript 模拟键盘事件和鼠标事件(比如模拟按下回车等) 2016年09月08日 15:23:25 神秘_博士 阅读数:41158 标签: javascript鼠标键盘事件模拟更多 个人分类 ...

  6. python+selenium模拟京东登录后台

    python+selenium模拟京东登录后台 import json from time import sleep from selenium import webdriver #from sele ...

  7. JavaScript中setInterval关闭问题

    这篇博客主要记录下学习中碰到的一些问题(以防忘记). JavaScript中,在setInterval中关闭该定时器,但是此次执行也会完成,用语言描述不太容易,直接看代码: var i=1; var ...

  8. 模拟京东商城登陆HttpRequest

    利用Winform HttpRequest 模拟登陆京东商城 目前只获取订单信息,可以获取图片等其他信息 using System; using System.Collections.Generic; ...

  9. 用Javascript模拟微信飞机大战游戏

    最近微信的飞机大战非常流行,下载量非常高. 利用JS进行模拟制作了一个简单的飞机大战[此源码有很多地方可以进行重构和优化] [此游戏中没有使用HTML5 任何浏览器都可以运行]. 效果图: 原理:利用 ...

随机推荐

  1. Voltage Keepsake CodeForces - 801C （思维+二分）

    题目链接 这是一道很棒的二分题. 思路: 首先先思考什么情况下是可以无限的使用,即输出-1. 我们思考可知,如果每一秒内所有设备的用电量总和小于等于充电器每秒可以充的电,那么这一群设备就可以无限使用. ...

  2. opencv学习笔记（五）

    线性滤波 方框滤波--boxblur函数 均值滤波(邻域平均滤波)--blur函数 高斯滤波--GaussianBlur函数 中值滤波--medianBlur函数 双边滤波--bilateralFil ...

  3. 『编程题全队』Beata阶段项目复审

    小组的名字和链接 优点 缺点,bug 报告(部分包括建议) 最终名次 想不出队名 1. 界面简洁大方2. 有搜索功能 1. 已经完成的活动缺了点提示界面2. 似乎界面有一点点卡顿目标实现:基本实现找到 ...

  4. HDU 2053 Switch Game

    http://acm.hdu.edu.cn/showproblem.php?pid=2053 Problem Description There are many lamps in a line. A ...

  5. SQL Data Compare 对比 SQLserver数据

    1. 下载redgate的工具 https://www.red-gate.com/dynamic/products/sql-development/sql-compare/download 2. 输入 ...

  6. python threading模块使用 以及python多线程操作的实践(使用Queue队列模块)

    今天花了近乎一天的时间研究python关于多线程的问题,查看了大量源码 自己也实践了一个生产消费者模型,所以把一天的收获总结一下. 由于GIL(Global Interpreter Lock)锁的关系 ...

  7. 使用正则真正的修改TP5的config.php文件

    来源 https://www.kancloud.cn/manual/thinkphp5/118026 问题 前台传值后台使用Config::set()方法写入config.php文件,但是并没有真正的 ...

  8. matplotlib极坐标方法详解

    一.极坐标 在平面内取一个定点O,叫极点,引一条射线Ox,叫做极轴,再选定一个长度单位和角度的正方向(通常取逆时针方向).对于平面内任何一点M,用ρ表示线段OM的长度(有时也用r表示),θ表示从Ox到 ...

  9. POJ - 1062（昂贵的聘礼）（有限制的spfa最短路）

    题意:...中文题... 昂贵的聘礼 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 54350   Accepted: 16 ...

  10. 自学Python3.5-字符串格式化 作用域 递归

    一.字符串格式化 二.作用域 三.递归