站内搜索:
首页 >> 前端 >> 内容
代码实现:侧边栏弹性滚动广告

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

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

<!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>

  • 上一篇:Vue初学之简单的组件间传值实现教程
  • 下一篇:链接跳转(本页面跳转)实现教程
  • 返回顶部