js文字的無縫滾動(上下)
阿新 • • 發佈:2018-07-31
ner none val pre code contain mouse auto 實現
使用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>
js文字的無縫滾動(上下)