首页 > > 网页制作 > css >

两侧跟随的广告

2019-11-25 16:07:26来源：博客园阅读 ()

两侧跟随的广告

跟随的广告

    <style>
        img{
            position: absolute;
            left:0;
            top:50px;
        }
        #demo{
            width:1000px;
            margin:0 auto;
        }
    </style>
</head>
 
<body>
	<img src="images/aside.jpg" alt="" 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>