js文字的無縫滾動（上下）

使用scrolltop值的遞增配合setInterval與setTimeout實現相關效果，左右無縫滾動使用scrollLeft即可

Dom內容

<div id="container">
			<ul id="con1">
				<li>javascript1</li>
				<li>javascript2</li>
				<li>javascript3</li>
				<li>javascript4</li>
				<li>javascript5</li>
				<li>javascript6</li>
				<li>javascript7</li>
			</ul>
		</div>

css內容

#container{width:400px;height:24px;margin:0 auto;border:1px solid red;overflow: hidden;}
			ul{list-style: none;padding:0;margin:0}
			ul li{height:24px;line-height: 24px;}

js相關內容

<script type="text/javascript">
		var c=document.getElementById("container");
		var con1=document.getElementById("con1");
		con1.innerHTML+=con1.innerHTML;  //把自身的內容變為原來的2倍
		// timer,t;
		var iHeight=24;
		var d=1000;
		var speed=50;
		function sTop(){
			if(c.scrollTop%iHeight==0){//如果卷去的距離能夠除盡一行的高度
				clearInterval(timer);//把定時器清除  
				t=setTimeout(startMove,d);//延遲1s后繼續觸發定時器
			}
			if(c.scrollTop>=con1.scrollHeight/2){  //如果卷去的高度>=整個ul高度的一半時
				c.scrollTop=0;
				c.scrollTop=c.scrollTop-con1.scrollHeight/2; //讓ul回到原點  即c.scrollTop=0
			}else{
				c.scrollTop++;  //如若不然，繼續往上滾動
			}
		}
		function startMove(){
			c.scrollTop++;
			timer=setInterval(sTop,speed);
		}
		startMove();
		c.onmouseover=function(){
			clearInterval(timer);
			clearTimeout(t);
		}
		c.onmouseout=function(){
			timer=setInterval(sTop,speed);
		}
	</script>