<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         .site-nav {

             height: 30px;

             background-color: #ccc;

         }

         .top-banner {

             background-color: orange;

         }

         .w {

             width: 1200px;

             height: 80px;

             background-color: pink;

             margin: 0 auto;

             position: relative;

         }

         .search {

             width: 1200px;

             height: 80px;

             background-color: lemonchiffon;

             margin: 0 auto;

         }

         a {

             position: absolute;

             top: 10px;

             right: 10px;

             width: 25px;

             height: 25px;

             text-align: center;

             line-height: 25px;

             background-color: #000;

             color: #fff;

             text-decoration: none;

         }

     </style>

 </head>

 <body>

     <div class="site-nav"></div>

     <div class="top-banner" style="opacity: 1">

         <div class="w">

             <a href="#">×</a>

         </div>

     </div>

     <div class="search"></div>

     <script>

         //获取事件源

         var topBanner = document.getElementsByClassName("top-banner")[0];

         var a = topBanner.children[0].firstElementChild || topBanner.children[0].firstChild;

         //定义定时器

         var timer = null;

         a.onclick = function(){

             timer = setInterval(function(){

                 topBanner.style.opacity -=.1;

                 if (topBanner.style.opacity < 0) {

                     topBanner.style.display = "none";

                     clearInterval(timer);

                 }

             },50);

         }

     </script>

 </body>

 </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. js原生常用事件event

    onblur 元素失去焦点: onchange用户改变域的内容: onclick鼠标点击对象: onerror当加载图片时发生错误: onfocus 元素获得焦点: onkeypress某个键盘的键被 ...

  2. SQL Data Compare 对比 SQLserver数据

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

  3. SQLSERVER备份恢复后权限问题简单处理.

    1. 同事的服务器出现无法访问表, 应用连不上数据库... 远程了下 发现. 使用业务用户登录数据库之后查询无法下拉帮助到表, 必须增加schemas才可以访问到具体的表. 2. 问题解决. 1. 修 ...

  4. Delphi编码规范

    以下是在之前的公司与别人共同参与制定的Delphi开发规范(5年前了,那时用的还是Delphi7,部分规则可能有些过时,但不整理了,觉得有用的人,自己整理成适合自己的开发规范吧), 目    录一.序 ...

  5. caffe实现多任务学习

    Github: https://github.com/Haiyang21/Caffe_MultiLabel_Classification Blogs  1. 采用多label的lmdb+Slice L ...

  6. VS2013编译报错error C4996: 'sprintf': This function or variable may be unsafe. Consider using sprintf_s instead. To disable deprecation, use _CRT_SECURE_NO_WARNINGS.

    解决方法有两个: 1. 在预编译头文件stdafx.h里(在没有include任何头文件之前)定义下面的宏: #define _CRT_SECURE_NO_DEPRECATE 2. 将sprintf函 ...

  7. linux 运维常用的一些命令收集

    1.删除0字节文件find -type f -size 0 -exec rm -rf {} ; 2.查看进程按内存从大到小排列ps -e   -o “%C   : %p : %z : %a”|sort ...

  8. servlet表单中get和post方法的区别

    Form中的get和post方法,在数据传输过程中分别对应了HTTP协议中的GET和POST方法.二者主要区别如下: 1.Get是用来从服务器上获得数据,而Post是用来向服务器上传递数据. 2.Ge ...

  9. pandas的筛选功能，跟excel的筛选功能类似，但是功能更强大。

    Select rows from a DataFrame based on values in a column -pandas 筛选 https://stackoverflow.com/questi ...

  10. 14 Zabbix Item类型之Simple checks类型

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 14 Zabbix Item类型之Simple checks类型 Simple checks通常用 ...