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; 150px; height: 300px; z-index: 1; top: 120px; left: 20px; } 10 .con, .close1 { position: absolute; } 11 .con { 150px; height: 300px; top: 0; left: 0; background-color: #7ca1ee; } 12 .close1 { 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; 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>