Use the scrolltop value of the increment mate SetInterval with the settimeout implementation of the effect, left and right seamless scrolling using scrollleft can
Dom Content
<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 Content
#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 related content
<script type= "Text/javascript" > var c=document.getelementbyid ("container"); var Con1=document.getelementbyid ("Con1"); con1.innerhtml+=con1.innerhtml; Change the contents of oneself to twice times the original//timer,t; var iheight=24; var d=1000; var speed=50; function STop () {if (c.scrolltop%iheight==0) {//If the volume goes away to a height of clearinterval (timer);//Remove the timer T=settimeout (STARTMOVE,D)///delay 1s after triggering timer} if (C.SCROLLTOP>=CON1.SCROLLHEIGHT/2) {/ /If the volume goes to the height >= the entire UL height of half time c.scrolltop=0; C.SCROLLTOP=C.SCROLLTOP-CON1.SCROLLHEIGHT/2; Let ul back to the original point namely C.scrolltop=0}else{c.scrolltop++; If not, continue to scroll up}} 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 Text Seamless scrolling (up and down)