<!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. Deepin折腾手记之安装常用软件

    1. 创建快捷方式 在创建快捷图标的文件/usr/share/applications/xx.desktop 编辑内容 [Desktop Entry] Name=VNote X-Deepin-Vend ...

  2. 微信小程序 拼团商品倒计时（拼团列表、拼团商品详情）

    直接上图: 拼团列表.拼团详情-倒计时                                    //单个倒计时,适用用于单个商品的倒计时 js文件: //倒计时 function cou ...

  3. eclipse中使用lombok不生效

    eclipse中使用lombok,在实体类中添加@Data后,还是不能调用get.set方法.需要修改eclipse配置 1.将 lombok.jar 复制到eclipse.ini同级目录.下载的lo ...

  4. spring boot项目搭建中遇到的问题

    自己动手搭建一下spring boot的项目,中途遇到了几个问题,在这里记录一下! 一.关于数据库中的表设计的问题 1.设计表的时候一定要添加的两个字段created updated 创建时间与更新时 ...

  5. 使用C++日志库log4cplus

    用vs2015编译log4cplus,新建工程使用该库的时候出现连接错误,错误原因如下所述: 编译unicode版,可以正常使用了.

  6. 19-10-16-R

    其实……这篇是真咕了. 反思: ××我$T1$两个小时构造$xiebi$了(虽然我觉得如果干仨小时可能行?) ……如果$T1$用时过长的话那考试多半不行…… 结果: 35 Miemeng 50 03: ...

  7. PL/SQl连接数据库ORA-12154错误

    先说说我遇到的问题: 1.在sql/plus下可以正确连接到数据库(oracle10g): 2.检查我机器(64)位环境变量的配置,没问题.path环境变量没问题(C:\oraclexe\app\or ...

  8. 【php实现数据结构】单向链表

    什么是单向链表 链表是以链式存储数据的结构,其不需要连续的存储空间,链表中的数据以节点来表示,每个节点由元素(存储数据)和指针(指向后继节点)组成. 单向链表(也叫单链表)是链表中最简单的一种形式,每 ...

  9. id 工具: 查询用户所对应的UID 和GID 及GID所对应的用户组

    id 工具是用来查询用户信息,比如用户所归属的用户组,UID 和GID等:id 用法极为简单:我们举个例子说明一下: 语法格式: id  [参数]  [用户名] 至于有哪些参数,自己查一下 id -- ...

  10. YUM配置文件

    创建容器,位置在/etc/yum.repos.d,扩展名必须是.repo #cd  /etc/yum.repos.d #vim yum.repo         新建一个仓库文件,名字可以随便定义,在 ...