<!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. eclipse没有(添加)”Dynamic Web Project”选项的方法

    https://www.cnblogs.com/longronglang/p/7156383.html(copy) help->install new software web - http:/ ...

  2. 流程控制之if判断，while循环，for循环

    if判断? 什么是if判断? 判断一个条件如果成立则做...不成立则... 为什么要有判断? 让计算机像人一样具备判断的能力 如何用if判断 if 条件1: code1    code2    cod ...

  3. Java微信二次开发（三）

    各种类型消息的封装 第一步:找到com.wtz.message.response包,新建类Image.java package com.wtz.message.response; /** * @aut ...

  4. Lodop设置文本项行间距、字间距

    LODOP给文本项ADD_PRINT_TEXT设置字间距.行间距,可以在打印设计页面,右键属性里设置,然后在打印设计生成代码,也可以直接写代码.LineSpacing行间距.LetterSpacing ...

  5. 如何在循环中使用await？

    我正在尝试创建一个异步控制台应用程序,对集合进行一些操作.我有一个版本使用并行for循环,使用异步/等待.我预计异步/等待版本的工作类似于并行版本,但它同步执行.是什么原因呢? class Progr ...

  6. BZOJ1552[Cerc2007]robotic sort&BZOJ3506[Cqoi2014]排序机械臂——非旋转treap

    题目描述 输入 输入共两行,第一行为一个整数N,N表示物品的个数,1<=N<=100000. 第二行为N个用空格隔开的正整数,表示N个物品最初排列的编号. 输出 输出共一行,N个用空格隔开 ...

  7. C# 后台访问webapi

    具体在哪看见的忘记了. 异步: public static class CallWebAPI { public static async Task<string> APIPost(stri ...

  8. asp.net 性能提升

    原文链接:http://www.oschina.net/translate/8-ways-improve-asp-net-web-api-performance ASP.NET Web API 是非常 ...

  9. UVA-1572

    解题思路: 之前看到的骚操作,主要思想就是把两个面合在一起看成两个点相连,最后只要找到一个环就可以无限克隆这个环使得无限延迟. 把符号变成数字如A-变为0,A+变为1,则0^1=1 ,这两个符号可以通 ...

  10. 20 Zabbix 利用Scripts栏目对Hosts远程执行命令

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 20 Zabbix 利用Scripts栏目对Hosts远程执行命令 在Monitoring板块中, ...