<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>upRoll</title> </head> <body> <style type="text/css"> body{margin:0px auto; padding:0px;} ul,li{margin:0px; padding:0px;list-style:none;} .scroll_div {width:180px; height:109px; border:1px solid #96C; margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;} .scroll_div div{ height:110px;} </style> <!--#####滚动区_begin域#####--> <div style="text-align:center"> <div id="scroll_div" class="scroll_div"> <div> <ul> <li>aaaaaaaaaaaaaaaaaaaaa</li> <li>bbbbbbbbbbbbbbbbbbbbb</li> <li>ccccccccccccccccccccc</li> <li>ddddddddddddddddddddd</li> <li>eeeeeeeeeeeeeeeeeeeee</li> <li>fffffffffffffffffffff</li> </ul> </div> <div></div> </div> </div> <div style="height:10px;"></div> <div style="text-align:center"> <div id="scroll_diy" class="scroll_div"> <div> <ul> <li>ggggggggggggggggggggg</li> <li>hhhhhhhhhhhhhhhhhhhhh</li> <li>iiiiiiiiiiiiiiiiiiiii</li> <li>jjjjjjjjjjjjjjjjjjjjj</li> <li>kkkkkkkkkkkkkkkkkkkkk</li> <li>lllllllllllllllllllll</li> </ul> </div> <div></div> </div> </div> <!--#####滚动区域_end#####--> <script type="text/javascript"> function upRoll(obj,myMar,speed){ var scroll_obj = document.getElementById(obj); var scroll_beg = scroll_obj.getElementsByTagName('div').item(0); var scroll_end = scroll_obj.getElementsByTagName('div').item(1); scroll_end.innerHTML = scroll_beg.innerHTML; var marquee = function(){ if(scroll_end.offsetHeight - scroll_obj.scrollTop <= 0 ){ scroll_obj.scrollTop -= scroll_beg.offsetHeight; }else{ scroll_obj.scrollTop++; } } myMar = setInterval(marquee,speed); scroll_obj.onmouseover = function(){clearInterval(myMar);} scroll_obj.onmouseout = function(){myMar = setInterval(marquee,speed);} } upRoll('scroll_div','sd',50); upRoll('scroll_diy','se',20); </script> </body> </html>
寫法2
function faqDTScroll(id,w,n){ var box=document.getElementById(id),can=true,w=w||100,fq=fq||10,n=n==-1?-1:1; box.innerHTML += box.innerHTML; box.onmouseover = function(){can=false}; box.onmouseout = function(){can=true}; var max = parseInt(box.scrollHeight/2); new function (){ var stop = box.scrollTop%20==0&&!can; if(!stop){ var set = n > 0 ? [max,0] : [0,max]; box.scrollTop==set[0]?box.scrollTop=set[1]:box.scrollTop+=n; }; setTimeout(arguments.callee,box.scrollTop%20?fq:w); }; }
faqDTScroll('dtscrollID',2000);