<!DOCTYPE html>

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

 <head>

     <meta charset="utf-8" />

     <title></title>

     <style type="text/css">

         * { padding: 0; margin: 0; border: 0; }

         .adv { position: relative; width: 150px; height: 300px; z-index: 1; top: 120px; left: 20px; }

         .con, .close1 { position: absolute; }

         .con { width: 150px; height: 300px; top: 0; left: 0; background-color: #7ca1ee; }

         .close1 { width: 23px; height: 23px; font-size: 22px; text-align: center; color: #ffffff; top: 5px; left: 120px; z-index: 999; }

             .close1:hover { background-color: #808080; }

         .text { height: 20000px; width: 200000px; margin: 0 auto; }

     </style>

 </head>

 <body>

     <div class="adv" id="advC">

         <div class="con"></div>

         <div class="close1" onclick="clo()">×</div>

     </div>

     <div class="text"> 唯一的缺点就是横向滑动效果不好，建议还是用固定式，不需要滑动比较好 </div>

     <script type="text/javascript">

         var adv = document.getElementById("advC");//获取广告窗口

         function clo() {//关闭广告窗口函数

             adv.style.display = "none";

         }

         var uu = null;//计时器全局变量声明

         function scol() {

             clearInterval(uu);//清除计时器

             //获取广告即将随滚动条滑动到的坐标

             var advTopX = 120 + parseInt(document.body.scrollTop);

             var advLeftX = 20 + parseInt(document.body.scrollLeft);

             var advTop, advLeft;//获取广告当前坐标

             if (adv.currentStyle) {

                 advTop = parseInt(adv.currentStyle.top);

                 advLeft = parseInt(adv.currentStyle.left);

             } else {

                 advTop = parseInt(document.defaultView.getComputedStyle(adv, null).top);

                 advLeft = parseInt(document.defaultView.getComputedStyle(adv, null).left);

             }

             //计算从当前坐标 到 即将滑动到的坐标 需要跑多少距离

             var TopLong = advTopX - advTop;

             var LeftLong = advLeftX - advLeft;

             //利用计时器实现广告匀速随滚动条滑动效果

             uu = setInterval(function () {

                 if ((advTop - 10 < advTopX && advTop + 10 > advTopX) && (advLeft - 10 < advLeftX && advLeft + 10 > advLeftX)) {//判断垂直与横向是否处于该区间值，前后误差10px

                     adv.style.top = advTopX + "px";//垂直距离=即将滑动到的距离

                     adv.style.left = advLeftX + "px";//横向距离=即将滑动到的距离

                     clearInterval(uu);//清除计时器，即到这里的时候就跳出计时器，固定广告位置

                 } else {

                     advTop += parseFloat(TopLong / 200);//将需要滑动的距离平均分为200份

                     adv.style.top = Math.ceil(advTop) + "px";//每次计时器进来滑动1份

                     advLeft += parseFloat(LeftLong / 200);//将需要滑动的距离平均分为200份

                     adv.style.left = Math.ceil(advLeft) + "px";//每次计时器进来滑动1份

                     //这里的份数可以调节滑动速度的快慢，但是必须为整十整百整千，数字越大越慢，越小越快

                 }

             }, 1);

         }

         window.onscroll = scol;//注册滚轮滑动事件

     </script>

 </body>

 </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. 烂泥：通过binlog恢复mysql备份之前的数据

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 上一篇文章,我们讲解了如何通过mysql的binlog日志恢复mysql数据库,文章连接为<烂泥:通过binlog恢复mysql数据库>.其 ...

  2. 让HTML页面缩放适应移动客户端尺寸

    多的不说了,直接看代码吧 <html lang="en"> <head> <meta http-equiv = "X-UA-Compatib ...

  3. poj 2104 K-th Number（可持久线段树）

    K-th Number 持久化:http://www.cnblogs.com/tedzhao/archive/2008/11/12/1332112.html 结构:http://www.docin.c ...

  4. Android 的提权 (Root) 原理是什么?

    作者:Kevin链接:https://www.zhihu.com/question/21074979/answer/18176410来源:知乎著作权归作者所有,转载请联系作者获得授权. Android ...

  5. CentOS下mysql默认安装位置

    如果采用RPM包安装,安装路径应在/usr/share/mysql目录下 mysqldump文件位置:/usr/bin/mysqldump mysqli配置文件: /etc/my.cnf或/usr/s ...

  6. 【转载】Android Metro风格的Launcher开发系列第二篇

    前言: 各位小伙伴们请原谅我隔了这么久才开始写这一系列的第二篇博客,没办法忙新产品发布,好了废话不说了,先回顾一下:在我的上一篇博客Android Metro风格的Launcher开发系列第一篇写了如 ...

  7. Windows Azure 负载均衡会话保持

    Windows Azure的负载均衡器默认是5元组的hash:源地址,源端口,目的地址,目的端口,协议.即:只有上述五个元组完全一致的会话数据包才会被转发到同一个后端服务器.显然,对于绝大多数通过NA ...

  8. Virtual Box常用指令

    以下操作需在命令行里将当前路径设为 Virtual Box安装目录 1. 调整磁盘大小(只能调整动态分配的.vdi格式文件) VBoxManage modifyhd "xxx.vdi&quo ...

  9. 中国移动测试大会 PPT 和视频

    PPT网盘链接:http://pan.baidu.com/s/1c0prdoG优酷专辑:http://v.youku.com/v_show/id_XMTI5NjExNjIwOA==.html?f=25 ...

  10. MipMap

    MipMap 首先从MIPMAP的原理说起,它是把一张贴图按照2的倍数进行缩小.直到1X1.把缩小的图都存储起来.在渲染时,根据一个像素离眼睛为之的距离,来判断从一个合适的图层中取出texel颜色赋值 ...