页面的跟随广告
2017-12-02 本文已影响0人
liwuwuzhi
你知道平时在页面上看的那些跟随广告是怎么写出来的吗，其实也是挺简单挺有意思的，我的还带有缓冲效果哦，估计讨厌碍事的广告，看在它努力跟着我滚的分上还是原谅它吧。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{height:3000px;background: #ccc;}
#box{width:100px;height:100px;position: absolute;right:0;background: red;}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var weChat = document.getElementById('box');
var e = e || window.event;
window.onscroll = function(e){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var target = scrollTop + 130;
move(parseInt(target));
}
function move (target) {
//var weChat = document.getElementById('box');
clearInterval(weChat.timer);
weChat.timer = setInterval(function(){
var speed = (target-weChat.offsetTop)/8;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if(weChat.offsetTop == target){
clearInterval(weChat.timer);
}else{
weChat.style.top = weChat.offsetTop+speed+'px';
}
},30);
}
</script>
</body>
</html>
