<!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. asp.net服务器控件onclick带参数

    服务器控件处理参数随笔 正确: <asp:CheckBox ID="cbComplareProduct" runat="server" Text=&quo ...

  2. Redisd VS Memcached

    Redis也常常被当作 Memcached的挑战者被提到桌面上来.关于Redis与Memcached的比较更是比比皆是.然而,Redis真的在功能.性能以及内存使用效率上都超越了Memcached吗? ...

  3. Android中 int,float,Double,String 互相转换

    1 如何将字串 String 转换成整数 int?  A. 有两个方法: 1). int i = Integer.parseInt([String]); 或 i = Integer.parseInt( ...

  4. JavaScript为select添加option，select选项变化时的处理，获取slelect被选中的值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 调试2440 RAM拷贝至SDRAM遇到的问题

    汇编代码主要是初始化一些寄存器,关狗,初始化时钟,初始化存储管理器以便访问内存,然后将SoC上4k RAM数据拷贝至SDRAM,然后在SRAM里面运行,由于代码未正常跑起来,于是使用JLinkExe来 ...

  6. 【分享】4412开发板ubuntu 12.0.4播放音乐没有声音解决方法

    转自迅为论坛:http://bbs.topeetboard.com 准备工作 1.下载 vim 在命令行上输入 apt-get install vim 下载 vim 2.输入 vim /etc/hos ...

  7. scala 第一课

    val msg="Hello,World" Scala 可以根据赋值的内容推算出变量的类型.这在Scala语言中成为"type inference". Scal ...

  8. plain framework 1 参考手册 入门指引之简介

    简介 简介 能做什么? LINUX WINDOWS 简介 简约框架(plain framework)是一款基于C/C++开发的,跨平台(windows/linux)应用的基础框架,开发者可以利用此框架 ...

  9. 第18章 图元文件_18.1 老式图元文件格式(wmf)

    18.1 老式图元文件格式(wmf) (1)创建图元文件:HDC hdcMeta = CreateMetaFile(lpszFile); ①如果lpszFile为NULL则图元文件存储在内存中,如果指 ...

  10. Java中的四套读写方案

    一.字节流读写方案 FileInputStream:字节流方式读取文本文件 FileoutputStream:字节流写入硬盘 二.字符流读写方案 FileReader:字符流读取文本 FileWrit ...