您现在的位置:首页 >> 前端 >> 内容

代码实现:侧边栏弹性滚动广告

时间:2018/6/5 14:59:40 点击:

  核心提示:代码实现:侧边栏弹性滚动广告!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>

作者:网络 来源:不详