<!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. SVN入门教程

    1. 什么是SVN SVN全名Subversion,即版本控制系统.SVN与CVS一样,是一个跨平台的软件,支持大多数常见的操作系统. 作为一个开源的版本控制系统,Subversion管理者随时间改变 ...

  2. ajax 异步请求

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. PHP 4种输出的方式

    <?php //测试用的数组 $info = array('11'=>'aaa', '22'=>'bbb', '33'=>'ccc'); //第一种,将整个数组作为一个对象输出 ...

  4. centos 7 修改系统屏幕分辨率

    centos 7 修改系统屏幕分辨率,命令方式和图形方式的修改方法. 命令:xrandr 通过命令 xrandr 修改系统的分辨率,输入xrandr: bash [admin@localhost ~] ...

  5. 非关心数据库无法进行连表查询 所以我们需要在进行一对多查询时候 无法满足 因此需要在"1"的一方添加"多"的一方的的id 以便用于进行连表查询 ; 核心思想通过id进行维护与建文件

     非关心数据库无法进行连表查询 所以我们需要在进行一对多查询时候 无法满足 因此需要在"1"的一方添加"多"的一方的的id 以便用于进行连表查询 ; 核心思想通 ...

  6. docker --swarm创建一个集群

    如果搭建错误可以强制脱离集群网络: docker swarm leave --force 初始化集群网络管理节点: docker swarm init --advertise-addr 10.101. ...

  7. ceph S3客户端操作--s3cmd

    S3 client 访问ceph rgw 安装: yum install s3cmd 验证安装是否成功: $s3cmd --version s3cmd version 1.5.2 #表示安装成功 在c ...

  8. echarts之简单的入门——【一】做个带时间轴的柱状统计图

    百度Echarts 官网首页  http://echarts.baidu.com/ 配置项手册 http://echarts.baidu.com/option.html#title GL配置项手册 h ...

  9. 【Linux】Centos6.8下一键安装Lamp环境

    [下载地址] 以下三种都是快捷安装环境的工具,都提供相应的脚本,原理都相同,一个会了其他的也就都会了,我用的比较多的会是lnmp和oneinstack,最近在用的都是oneinstack,挺好用的. ...

  10. spring cloud 入门系列一：初识spring cloud

    最近看到微服务很火,也是未来的趋势, 所以就去学习下,在dubbo和spring cloud之间我选择了从spring cloud,主要有如下几种原因: dubbo主要专注于微服务中的一个环节--服务 ...