<!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浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码

    基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...

  3. web页面浮动回到顶部功能和浮动广告

    实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...

  4. JQuery实现两侧浮动广告

    1.描述 两侧浮动显示广告 2.要点 其实就是一直在变浮动广告距顶部的值. 3.代码 <!DOCTYPE html> <html> <head> <meta ...

  5. Js浮动广告效果实现

    第一种 漂浮广告 不符合W3CJavaScript漂浮广告代码,很不错,代码精简,不过一次只有漂一个,复制就能用了.希望站长朋友喜欢. <html> <head> <ti ...

  6. 笨办法用js屏蔽被http劫持的浮动广告

    最近发现网站经常在右下角弹出一个浮动广告,开始的时候以为只是浏览器的广告. 后来越来越多同事反映在家里不同浏览器也会出现广告.然后深入检查了下,发现网站竟然被劫持了. 然后百度了一大堆资料,什么htt ...

  7. JavaScript实现页面滚动到div区域div以动画方式出现

    用JavaScript实现页面滚动效果,以及用wow.js二种方式实现网页滚动效果 要实现效果是页面滚动到一块区域,该区域以动画方式出现. 这个效果需要二点: 一:我们要先写好一个css动画. 二:用 ...

  8. 滑动cell的时候执行动画效果

    滑动cell的时候执行动画效果 效果图: 源码: // // ViewController.m // AniTab // // Created by XianMingYou on 15/2/26. / ...

  9. 自制Javascript浮动广告

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb ...

随机推荐

  1. C++中无数据成员的类的对象占用内存大小

    结论: 对于没有数据成员的对象,其内存单元也不是0,c++用一个内存单元来表示这个实例对象的存在. 如果有了数据或虚函数(虚析构函数),则相应的内存替代1标记自己的存在. PS:以下代码均在win32 ...

  2. 手势UIGestureRecognizer

    UIGestureRecognizer抽象类,六大手势是其子类: UITapGestureRecognizer      点击 UIPinchGestureRecognizer         缩放 ...

  3. python3-常用模块之sys

    import syssys 是和Python解释器打交道的sys.argvprint(sys.argv) # argv的第一个参数 是python这个命令后面的值 主要用途 1. 程序员 运维人员 在 ...

  4. 如何妥善处理WebBrowser对Javascript的错误问题，阻止JS弹出框，提高用户体验

    由于项目需求,最近转战客户端,开始搞浏览器开发.众所周知,现在在微软平台上开发浏览器,最常用的方法就是扩展Webbrowser,但是首先要清楚的是,WebBrowser控件仅仅是对WebBrowser ...

  5. Linux 启动dubbo管控台：

  6. 2018-11-26-win10-uwp-获取窗口的坐标和宽度高度

    title author date CreateTime categories win10 uwp 获取窗口的坐标和宽度高度 lindexi 2018-11-26 15:4:0 +0800 2018- ...

  7. Windows API 第三篇

    1.获得程序自身的路径: DWORD GetModuleFileName( HMODULE hModule, // handle to module LPTSTR lpFilename, // pat ...

  8. centos的yum配置

    什么是yum ?yum,是Yellow dog Updater Modified的简称,起初是由yellow dog这一发行版的开发者Terra Soft研发,用python写成,那时还叫做yup(y ...

  9. 如何使用Tunnel SDK上传/下载MaxCompute复杂类型数据

    基于Tunnel SDK如何上传复杂类型数据到MaxCompute?首先介绍一下MaxCompute复杂数据类型: 复杂数据类型 MaxCompute采用基于ODPS2.0的SQL引擎,丰富了对复杂数 ...

  10. JavaSE_04_JDK1.8新特性Lambda表达式

    1.1体验Lambda的更优写法 借助Java 8的全新语法,上述Runnable接口的匿名内部类写法可以通过更简单的Lambda表达式达到等效: 1.2 Lambda标准格式 Lambda省去面向对 ...