1.  <!DOCTYPE html>
  2.  
  3.  <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4.  <head>
  5.      <meta charset="utf-8" />
  6.      <title></title>
  7.      <style type="text/css">
  8.          * { padding: 0; margin: 0; border: 0; }
  9.          .adv { position: relative; width: 150px; height: 300px; z-index: 1; top: 120px; left: 20px; }
  10.          .con, .close1 { position: absolute; }
  11.          .con { width: 150px; height: 300px; top: 0; left: 0; background-color: #7ca1ee; }
  12.          .close1 { width: 23px; height: 23px; font-size: 22px; text-align: center; color: #ffffff; top: 5px; left: 120px; z-index: 999; }
  13.              .close1:hover { background-color: #808080; }
  14.          .text { height: 20000px; width: 200000px; margin: 0 auto; }
  15.      </style>
  16.  </head>
  17.  <body>
  18.  
  19.      <div class="adv" id="advC">
  20.          <div class="con"></div>
  21.          <div class="close1" onclick="clo()">×</div>
  22.      </div>
  23.      <div class="text"> 唯一的缺点就是横向滑动效果不好，建议还是用固定式，不需要滑动比较好 </div>
  24.  
  25.      <script type="text/javascript">
  26.          var adv = document.getElementById("advC");//获取广告窗口
  27.  
  28.          function clo() {//关闭广告窗口函数
  29.              adv.style.display = "none";
  30.          }
  31.  
  32.          var uu = null;//计时器全局变量声明
  33.  
  34.          function scol() {
  35.              clearInterval(uu);//清除计时器
  36.  
  37.              //获取广告即将随滚动条滑动到的坐标
  38.              var advTopX = 120 + parseInt(document.body.scrollTop);
  39.              var advLeftX = 20 + parseInt(document.body.scrollLeft);
  40.  
  41.              var advTop, advLeft;//获取广告当前坐标
  42.              if (adv.currentStyle) {
  43.                  advTop = parseInt(adv.currentStyle.top);
  44.                  advLeft = parseInt(adv.currentStyle.left);
  45.              } else {
  46.                  advTop = parseInt(document.defaultView.getComputedStyle(adv, null).top);
  47.                  advLeft = parseInt(document.defaultView.getComputedStyle(adv, null).left);
  48.              }
  49.  
  50.              //计算从当前坐标 到 即将滑动到的坐标 需要跑多少距离
  51.              var TopLong = advTopX - advTop;
  52.              var LeftLong = advLeftX - advLeft;
  53.  
  54.              //利用计时器实现广告匀速随滚动条滑动效果
  55.              uu = setInterval(function () {
  56.                  if ((advTop - 10 < advTopX && advTop + 10 > advTopX) && (advLeft - 10 < advLeftX && advLeft + 10 > advLeftX)) {//判断垂直与横向是否处于该区间值，前后误差10px
  57.                      adv.style.top = advTopX + "px";//垂直距离=即将滑动到的距离
  58.                      adv.style.left = advLeftX + "px";//横向距离=即将滑动到的距离
  59.                      clearInterval(uu);//清除计时器，即到这里的时候就跳出计时器，固定广告位置
  60.  
  61.                  } else {
  62.                      advTop += parseFloat(TopLong / 200);//将需要滑动的距离平均分为200份
  63.                      adv.style.top = Math.ceil(advTop) + "px";//每次计时器进来滑动1份
  64.  
  65.                      advLeft += parseFloat(LeftLong / 200);//将需要滑动的距离平均分为200份
  66.                      adv.style.left = Math.ceil(advLeft) + "px";//每次计时器进来滑动1份
  67.                      //这里的份数可以调节滑动速度的快慢，但是必须为整十整百整千，数字越大越慢，越小越快
  68.                  }
  69.              }, 1);
  70.  
  71.          }
  72.  
  73.          window.onscroll = scol;//注册滚轮滑动事件
  74.  
  75.      </script>
  76.  </body>
  77.  </html>

JavaScript学习笔记-随滚轮匀速滑动的浮动广告窗动画的更多相关文章

  1. Javascript-随滚轮匀速滑动的浮动广告窗动画

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  2. JavaScript学习笔记-元素在滚动条滑动一定高度后自动置顶

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. Java程序猿的JavaScript学习笔记（汇总文件夹）

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  4. Java程序猿的JavaScript学习笔记（8——jQuery选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  5. Java程序猿JavaScript学习笔记（2——复制和继承财产）

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  6. Java程序猿的JavaScript学习笔记（3——this/call/apply）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  7. Java程序猿JavaScript学习笔记（4——关闭/getter/setter）

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  8. Java程序猿JavaScript学习笔记（14——扩大jQuery UI）

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  9. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

随机推荐

  1. 如何获得浏览器localStorage的剩余容量

    一.如何获取localStorage的剩余容量 在H5大行其道的今天,localStorage(本地存储)对每一个前断攻城师来说都不太陌生.同时localStorage也给我们带来了极大的便利,不用于 ...

  2. DDNS

    一.DDNS简介 DNS,域名系统,是因特网的一项服务,它作为将域名和IP地址相互映射的一个分布式数据库,能够使人们更方便的访问互联网. DDNS,动态域名系统,是域名系统(DNS)中的一种自动更新名 ...

  3. 8、FTP，二种文本传输模式

    一.基本知识 1. FTP是 TCP/IP协议族 的协议之一,简称文件传输协议,主要用于远距离文件传输,如文件的上传和下载 2. 下面都是以VSFTP服务器为例 VSFTP服务器的用户有三种形式: 匿 ...

  4. unix automake 使用，快速生成你的Makefile

    使用automake快速生成编译的Makefile 1,确保自己装有的软件automake autoconf 2, 1)执行autoscan 并将生成的configure.scan重命名为config ...

  5. 记一次惨痛的线上bug

    讲述背景,刚入职新公司2个月的时候,接手一个红包系统.资历尚浅,对业务也不是很熟悉.公司开发新的平台,需要使用红包功能来进行推广,按照产品的需求,进行开发...然而,问题就出在这里,红包接口比较陈旧, ...

  6. AngularJS Filters

    过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式. filter 从 ...

  7. 应用多个icon的对比

    在给应用设计图标的时候,可能会遇到这样的需求,应用图标有老版和新版两种,而又想在桌面上同时显示这两个图标以对比效果. 一个应用本身只有一个自己的icon,在AndroidManifest.xml文件中 ...

  8. AccessHelper 需修改

    using System; using System.Collections.Generic; using System.Configuration; using System.Data; using ...

  9. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  10. linux运维中的命令梳理（三）

    ----------文本操作命令---------- sed命令:文本编辑工具 sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特 ...