JS学习之循环滚动信息

最新推荐文章于 2023-11-02 13:42:14 发布

Vaski

最新推荐文章于 2023-11-02 13:42:14 发布

阅读量1.4k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Vaski/article/details/52489965

版权

早期的循环信息栏可以用<marquee>来实现循环信息播放，而这个标签后来被W3C所抛弃。

里面的主要属性为

behavior:alternative(左右来回滚动)，slide(从左到右之后就不再滚动)，scroll(从左到右从左到右)。

direction:left,right,up,down.

scrollamount:滚动速度。

loop:-1为一直滚动，正数为滚动次数

因为该方法不符合W3C的功能和行为分开

最后还是得以JS来实现这种循环滚动的效果，主要思路是外界一个包裹div作为显示框架，内部包含两个div，第一个是其本身show1，第二个是第一信息的复制品主要目的是为了实现无缝的循环滚动播放效果。
当show1完全滚动出展示框（即刚好下边界到达显示框顶部），此时show2的顶部也到达显示框顶部，瞬间将show1又重置回初始位置（因为是瞬间在视觉上并不会感觉太大出入），这样来实现上下循环滚动播放。

代码如下（把JS和CSS放在了HTML里，便于查看）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>wuFengGunDong</title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		#show1,#show2{
			background-color: blue;
			height: 100px;
			width: 200px;
			margin:0 auto ;
			overflow: hidden;
		}	
		
		#showBoard{
			height: 100px;
			background: yellow;
			overflow: hidden;
			text-align:center;
		}
		ul {
			list-style: none;
		}
		li{
			height: 25px;
		}
	</style>
	<script type="text/javascript">
			window.onload = function(){
				 //alert(document.getElementById("showBoard").scrollTop);
				var board = document.getElementById("showBoard");
				var show1 = document.getElementById("show1");
				var show2 = document.getElementById("show2");
				show2.innerHTML = show1.innerHTML;
				board.scrollTop=0;
				function scroll(){
					if(board.scrollTop==show1.offsetHeight){
					 	board.scrollTop=0;
					}
					else{
				 		board.scrollTop+=2;
				 	}
				}
			 	var timer1=setInterval(scroll,50);
		 	}
	</script>
</head>
<body>
	<div id="showBoard">
		<div id="show1">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>

			</ul>
		</div>
		<div id="show2"></div>
	</div>

</body>
</html>

这次代码编辑大概花了一个半小时，总结出的经验是
1.scrollTop,scrollLeft 的值在变化的过程中不能超过 scrollHeight；
2.对于溢出部分一定要隐藏，scrollHeight，scrollWidth才会大于可视部分的高、宽。