saber酱的抱枕

Fly me to the moon

06/24
08:00
学习

JavaScript无缝滚动一例

<div id="demo">
	<div class="scrollbox">
		<div id="demo1">
			<a href="">雪见雪见雪见雪见雪见雪见</a>
			<a href="">sabersabersabersaber</a>
		</div>
		<div id="demo2"></div>
	</div>
</div>
<style type="text/css">
	#demo{width: 300px;overflow:hidden;} /*最外层box的宽度可以随意设置,但必须小于里面demo(如demo1)的宽度,否则滚动完一次会停止*/
	#demo .scrollbox{width:1000%;}/*设置一个较大的范围,保证其宽度大于内部两个div宽度之和(如果宽度不够两个div就会错开)*/
	#demo1,#demo2{display: inline-block;}/*浮动或设置display以保持在同一行*/
</style>
<script type="text/javascript">
	var demo = document.getElementById("demo");
	var demo1 = document.getElementById("demo1");
	var demo2 = document.getElementById("demo2");
	demo2.innerHTML=document.getElementById("demo1").innerHTML;
	function Marquee(){
		if(demo.scrollLeft-demo2.offsetWidth>=0){
			demo.scrollLeft-=demo1.offsetWidth;
		}
		else{
			demo.scrollLeft++;
		}
	}
	var myvar=setInterval(Marquee,30);
	demo.onmouseout=function (){myvar=setInterval(Marquee,30);}
	demo.onmouseover=function(){clearInterval(myvar);}
</script>

我解释下dom结构:
id#demo是最外层,设置滚动区域的宽高。此代码中它的宽度需要比滚动内容的宽度小。
class.scrollbox是容纳两个滚动容器的,它的宽度需要设置得比较宽,以保证能容纳两个滚动内容。
id#demo1和#demo2就是滚动内容了,通过设置浮动或display让他们保持在同一行,循环滚动。

示例中给出的css样式都是基础的必须样式,如果需要其他样式请自行添加。

JavaScript无缝滚动一例