Javascript-随滚轮匀速滑动的浮动广告窗动画 

 1 <!DOCTYPE html>
 2 
 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <meta charset="utf-8" />
 6     <title></title>
 7     <style type="text/css">
 8         * { padding: 0; margin: 0; border: 0; }
 9         .adv { position: relative; width: 150px; height: 300px; z-index: 1; top: 120px; left: 20px; }
10         .con, .close1 { position: absolute; }
11         .con { width: 150px; height: 300px; top: 0; left: 0; background-color: #7ca1ee; }
12         .close1 { width: 23px; height: 23px; font-size: 22px; text-align: center; color: #ffffff; top: 5px; left: 120px; z-index: 999; }
13             .close1:hover { background-color: #808080; }
14         .text { height: 20000px; width: 200000px; margin: 0 auto; }
15     </style>
16 </head>
17 <body>
18 
19     <div class="adv" id="advC">
20         <div class="con"></div>
21         <div class="close1" onclick="clo()">×</div>
22     </div>
23     <div class="text"> 唯一的缺点就是横向滑动效果不好，建议还是用固定式，不需要滑动比较好 </div>
24 
25 
26     <script type="text/javascript">
27         var adv = document.getElementById("advC");//获取广告窗口
28 
29         function clo() {//关闭广告窗口函数
30             adv.style.display = "none";
31         }
32 
33         var uu = null;//计时器全局变量声明
34 
35         function scol() {
36             clearInterval(uu);//清除计时器
37 
38             //获取广告即将随滚动条滑动到的坐标
39             var advTopX = 120 + parseInt(document.body.scrollTop);
40             var advLeftX = 20 + parseInt(document.body.scrollLeft);
41 
42             var advTop, advLeft;//获取广告当前坐标
43             if (adv.currentStyle) {
44                 advTop = parseInt(adv.currentStyle.top);
45                 advLeft = parseInt(adv.currentStyle.left);
46             } else {
47                 advTop = parseInt(document.defaultView.getComputedStyle(adv, null).top);
48                 advLeft = parseInt(document.defaultView.getComputedStyle(adv, null).left);
49             }
50 
51             //计算从当前坐标 到 即将滑动到的坐标 需要跑多少距离
52             var TopLong = advTopX - advTop;
53             var LeftLong = advLeftX - advLeft;
54 
55             //利用计时器实现广告匀速随滚动条滑动效果
56             uu = setInterval(function () {
57                 if ((advTop - 10 < advTopX && advTop + 10 > advTopX) && (advLeft - 10 < advLeftX && advLeft + 10 > advLeftX)) {//判断垂直与横向是否处于该区间值，前后误差10px
58                     adv.style.top = advTopX + "px";//垂直距离=即将滑动到的距离
59                     adv.style.left = advLeftX + "px";//横向距离=即将滑动到的距离
60                     clearInterval(uu);//清除计时器，即到这里的时候就跳出计时器，固定广告位置
61 
62                 } else {
63                     advTop += parseFloat(TopLong / 200);//将需要滑动的距离平均分为200份
64                     adv.style.top = Math.ceil(advTop) + "px";//每次计时器进来滑动1份
65 
66                     advLeft += parseFloat(LeftLong / 200);//将需要滑动的距离平均分为200份
67                     adv.style.left = Math.ceil(advLeft) + "px";//每次计时器进来滑动1份
68                     //这里的份数可以调节滑动速度的快慢，但是必须为整十整百整千，数字越大越慢，越小越快
69                 }
70             }, 1);
71 
72         }
73 
74         window.onscroll = scol;//注册滚轮滑动事件
75 
76     </script>
77 </body>
78 </html>

 

posted @ 2016-08-17 13:51  YanEr、  阅读(806)  评论(0)    收藏  举报