网站建设技术
网页内容连续滚动的代码
时间:2009年11月12日 来源:本站整理 作者:佚名 浏览:

       一:上下连续滚动

 
<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>