两侧跟随的广告
Posted xiaoyaolang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了两侧跟随的广告相关的知识，希望对你有一定的参考价值。
跟随的广告
<style>
img{
position: absolute;
left:0;
top:50px;
}
#demo{
width:1000px;
margin:0 auto;
}
</style>
</head>
<body>
<img src="images/aside.jpg" id="pic"/>
<div id="demo">
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
</div>
</body>
</html>
<script type="text/javascript">
var pic = document.getElementById("pic");
var picT = pic.offsetTop; //50
window.onscroll = function(){
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
//img它的top值要运动多少？ 目标dis
var dis = picT + sTop;
move(pic,dis);
}
var timer = null;
function move(obj,target){
clearInterval(timer);
timer = setInterval(function(){
var speed = target - obj.offsetTop > 0 ? 5 : -5;
if(Math.abs(target - obj.offsetTop) < 5){
obj.style.top = target + "px";
clearInterval(timer);
return
}
obj.style.top = speed + obj.offsetTop + "px";
},20)
}
</script>
以上是关于两侧跟随的广告的主要内容，如果未能解决你的问题，请参考以下文章
JS-特效 ～ 02. 屏幕滚动事件 DTDscroll顶部悬浮导航两侧跟随广告返回顶部小火煎