一:上下连续滚动
<div id=rolllink style=overflow:hidden;height:170;width:100> <div id=rolllink1>要滚动的内容</div> <div id=rolllink2></div> </div> <script> var rollspeed=30 rolllink2.innerHTML=rolllink1.innerHTML //克隆rolllink1为rolllink2 function Marquee() { if(rolllink2.offsetTop-rolllink.scrollTop<=0) //当滚动至rolllink1与rolllink2交界时 rolllink.scrollTop-=rolllink1.offsetHeight //rolllink跳到最顶端 else rolllink.scrollTop++ } var MyMar=setInterval(Marquee,rollspeed) //设置定时器 rolllink.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的 rolllink.onmouseout=function() {MyMar=setInterval(Marquee,rollspeed)}//鼠标移开时重设定时器 </script> |
二:左右连续滚动
<div id=demo3 style=overflow:hidden;height:100;width:710;> <table width="710" border=0 align="center" cellpadding=0 cellspacing="3" cellspace=0> <tr> <td nowrap id=demo4>要滚动的内容</td> <td nowrap id=demo5></td> </tr> </table> </div> <script> var speed=10 demo5.innerHTML=demo4.innerHTML function Marquee() { if(demo5.offsetWidth-demo3.scrollLeft<=0) demo3.scrollLeft-=demo4.offsetWidth else { demo3.scrollLeft++ } } var MyMar=setInterval(Marquee,speed) demo3.onmouseover=function() {clearInterval(MyMar)} demo3.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script> 三.时滚时停的代码 <div id="icefable1">要滚动的内容</div> <script language="JavaScript" type="text/javascript"> marqueesHeight=100; stopscroll=false; with(icefable1) { style.height=marqueesHeight; style.overflowX="visible"; style.overflowY="hidden"; noWrap=true; onmouseover=new Function("stopscroll=true"); onmouseout=new Function("stopscroll=false"); } preTop=0; currentTop=marqueesHeight; stoptime=0; icefable1.innerHTML += icefable1.innerHTML; function init_srolltext() { icefable1.scrollTop=0; setInterval("scrollUp()",15); } function scrollUp() { if(stopscroll==true) return; currentTop+=1; if(currentTop>marqueesHeight) { stoptime+=1; currentTop-=1; if(stoptime==400) { currentTop=0; stoptime=0; } } else { preTop=icefable1.scrollTop; icefable1.scrollTop+=1; if(preTop==icefable1.scrollTop) { icefable1.scrollTop=0; icefable1.scrollTop+=1; } } } init_srolltext(); </script> |