核心提示:代码实现:侧边栏弹性滚动广告!DOCTYPE htmlhtml head meta charset=UTF-8 title/title /head style body{margin: 0;pa...
代码实现:侧边栏弹性滚动广告
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> body{margin: 0;padding:0;position: relative;background: #008000;height: 5000px;} #box{width: 200px;height: 300px;background: yellow;position: absolute;left: 0;top: 200px;} </style> <body> <p id="box"></p> <script> var box = document.getElementById("box") var boxT = box.offsetTop; var begin = 0,end = 0,timer = null; window.onscroll=function(){ clearInterval(timer); var scrollT = document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollT) end = boxT + scrollT // console.log(end) timer = setInterval(function(){ begin = begin+(end - begin)/8; box.style.top = begin + "px"; if(Math.random(begin)===end){ clearInterval(timer); } },20) } </script> </body> </html>