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>
