JavaScript实现微博滚动效果，可选择向上或向下滚动

最新推荐文章于 2022-12-27 15:35:57 发布

weixin_34279061

最新推荐文章于 2022-12-27 15:35:57 发布

阅读量87

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/jiangli0502/blog/159637

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title> 滚动</title>
		<script type="text/javascript">
			var boo = true;
			window.onload = function(){
				var speed =30;//滚动速度   
				demo2.innerHTML = demo1.innerHTML;
				demo3.innerHTML = demo1.innerHTML;
				demo.scrollTop = demo1.offsetTop;				
				function Marquee(){  
					if(boo==true){
						if(demo2.offsetTop - demo.scrollTop <= 0)  
						  demo.scrollTop -= demo1.offsetHeight;  
						else{  
						  demo.scrollTop += 2;   
						}  
					}else{
						if(demo3.offsetTop - demo.scrollTop >= 0)  
						  demo.scrollTop += demo1.offsetHeight;  
						else{  
						  demo.scrollTop -= 2;   
						}  
					}					
				}  
				var MyMar = setInterval(Marquee,speed);  
				demo.onmouseover = function() {
					clearInterval(MyMar);
				} 
				demo.onmouseout = function() {
					MyMar = setInterval(Marquee,speed);
				}  
			}
			function down(){
				boo=true;
			}
			function up(){
				boo=false;
			}
		</script>
	</head>

	<body
		<div style="position:relative;left:200px;top:100px;width:220px;">
			<div style="text-align:center">
				<a id="up" href="javascript:void(0)" onclick="up()">向上滚动</a>
			</div>
			<div id="demo" style="width:220px;overflow: hidden; height: 250px;border:1px solid red;"> 
				<div id="demo3">
					
				</div>
				<div id="demo1">  
					<img src="images/01.jpg"/><br/> 
					<img src="images/02.jpg"/><br/>  
					<img src="images/03.jpg"/><br/>  
				</div>  
				<div id="demo2">
					
				</div>
			</div>  
			<div style="text-align:center">
				<a id="down" href="javascript:void(0)" onclick="down()">向下滚动</a>
			</div>
		</div>
	</body>
</html>

转载于:https://my.oschina.net/jiangli0502/blog/159637