<!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++ STL使用

    STL标准模板库,提供一些类似java集合类的数据结构容器.比如eque.list.vector.map 等.还提供一些支持这些容器的算法和遍历容器的迭代器. 使用方法 #include <io ...

  2. 纯 CSS 实现实心三角形和空心三角形

    一.实心三角形 1.代码 .div-angles{ width:; height:; border-style: solid; border-width:30px; border-color: tra ...

  3. Jenkins自动部署springboot项目

    说明: 该示例为在windows系统下自动化部署springboot 架构: springboot + github + gradle + jdk8 各种配置步骤及截图说明: 1.配置git,grad ...

  4. day26 作业

    目录 TCP三次握手.四次挥手图 三次握手 四次挥手 简明理解三次握手 基于TCP开发一款远程CMD程序 TCP三次握手.四次挥手图 三次握手 第一次握手:客户端给服务端发一个 SYN 报文,并指明客 ...

  5. vue v-for详解

    1.Vue动态渲染列表------v-for用法详解: Html: <figure v-for="list in lists">     <div>     ...

  6. bash: express: command not found及vue连接数据库调接口

    今天在使用express -e . 的命令时,cmd给我报了一段不识别的错误: bash: express: command not found ,在网上查了一下,有人指出是express4的版本将命 ...

  7. PHP数组循环遍历的四种方式

     1.使用for循环遍历数组     conut($arr);用于统计数组元素的个数.     for循环只能用于遍历,纯索引数组!!!!     如果存在关联数组,count统计时会统计两种数组的总 ...

  8. PHP中的符号 ->、=> 和 :: 的含义（用法）

    php新手经常碰到的问题,->.=> 和 :: 这三个家伙是什么分别都是做什么的啊!看着就很晕. 没关系,下面我们做一下详细的解释,如果你有C++,Perl基础,你会发现这些家伙和他们里面 ...

  9. 使用Hilo.JS快速开发Flappy Bird

    http://hiloteam.github.io/tutorial/flappybird.html#_9 Flappy Bird是一款前不久风靡世界的休闲小游戏.虽然它难度超高,但是游戏本身却非常简 ...

  10. 左神算法书籍《程序员代码面试指南》——2_03删除链表的中间节点和a/b处的节点

    [题目]给定链表的头节点head,实现删除链表的中间节点的函数.例如:不删除任何节点:1->2,删除节点1:1->2->3,删除节点2:1->2->3->4,删除节 ...