1 <html> 2 <head> 3 <title>1</title> 4 <style type='text/css'> 5 #box{ 6 float:left; 7 border:solid 1px green; 8 overflow:hidden; 9 height:26px; 10 border-width:1px 0px; 11 } 12 #ul_news{ 13 border:solid 0px green; 14 margin:0px; 15 list-style-type:none; 16 width:150px; 17 position:relative; 18 } 19 #ul_news li{ 20 padding:3px; 21 border-width:0px; 22 border-bottom:dashed 1px #cccccc; 23 font-size:14px; 24 } 25 </style> 26 </head> 27 <body onclick='fun2();'> 28 <div id='box'> 29 <ul id='ul_news'> 30 <li>hello world</li> 31 <li><font color='green'>java web</font></li> 32 <li><font color='red'><strong>zend framework</strong></font></li> 33 </ul> 34 </div> 35 <script language='javascript'> 36 var obj=document.getElementById('ul_news'); 37 function fun(){ 38 if(obj.offsetTop==-26){ 39 var obj2=obj.firstChild.cloneNode(true); 40 obj.removeChild(obj.firstChild); 41 obj.appendChild(obj2); 42 obj.style.top='-1px'; 43 }else{ 44 if(obj.offsetTop-4<-26) 45 obj.style.top='-26px'; 46 else 47 obj.style.top=(obj.offsetTop-4)+'px'; 48 } 49 } 50 function fun2(){ 51 window.setInterval("fun();",200); 52 } 53 </script> 54 55 </body> 56 </html>