文字向上间歇滚动三种js代码

Posted on 2010-09-07 13:55 lzhdim 阅读(2319) 评论(0) 编辑收藏举报

<div style="margin-top:30px;padding:10px;background:url(img/bg2.gif) bottom repeat-x">
<div style="overflow:hidden;height:22px;line-height:22px;font-size:14px" id="marqueebox">
早上好!<br />
天气有变化<br>
下班了，明天见！<br>
</div>
</div>
<script>
function startmarquee(lh,speed,delay){
var t;
var p=false;
var o=document.getelementbyid("marqueebox");
o.innerhtml+=o.innerhtml;
o.onmouseo教程ver=function(){p=true}
o.onmouseout=function(){p=false}
o.scrolltop = 0;
function start(){
t=setinterval(scrolling,speed);
if(!p) o.scrolltop += 2;
}
function scrolling(){
if(o.scrolltop%lh!=0){
o.scrolltop += 2;
if(o.scrolltop>=o.scrollheight/2) o.scrolltop = 0;
}else{
clearinterval(t);
settimeout(start,delay);
}
}
settimeout(start,delay);
}
startmarquee(22,50,2000);
</script>

方法二

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="站长,网页特效_a/js.html target=_blank >网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.111cn.net,站长特效网" />
<meta name="description" content="www.111cn.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<meta http-equiv="content-language" content="zh-cn">
<title>三组文字定时向上滚动特效，sky整理收集，站长特效网欢迎您。</title>
<style type="text/css教程">
*{font-size:12px;}
#scrollbox2{width:150px; height:64px; line-height:22px; overflow:hidden; background-color:#eee;}
</style>
</head>
<body>
<a href="<#zc_blog_host#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

国家汇率名称今日汇率
<div id="scrollbox2">
美元usd ŀ.775%

港币hkd ŀ.75%

英镑gbp ŀ.50%

欧元eur ŀ.25%

日元jpy ŀ.01%

</div>
<script>
window.onload=function(){
new marquee(
    "scrollbox2", //容器id

    0, //向上滚动(0向上 1向下 2向左 3向右)

    2, //滚动的步长

    200, //容器可视宽度

    64, //容器可视高度

    50, //定时器数值越小，滚动的速度越快(1000=1秒,建议不小于20)

    2000, //间歇停顿时间(0为不停顿,1000=1秒)

    1000, //开始时的等待时间(0为不等待,1000=1秒)

    22 //间歇滚动间距(可选)

    );
};//欢迎来到站长特效网，我们的网址是www.111cn.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function marquee(){
this.id=document.getelementbyid(arguments[0]);
this.direction=arguments[1];
this.step=arguments[2];
this.width=arguments[3];
this.height=arguments[4];
this.timer=arguments[5];
this.waittime=arguments[6];
this.stoptime=arguments[7];
if(arguments[8]){this.scrollstep=arguments[8];}else{this.scrollstep=this.direction>1?this.width:this.height;}
this.ctl=this.startid=this.stop=this.mouseover=0;
this.id.style.overflowx=this.id.style.overflowy="hidden";
this.id.nowrap=true;
this.id.style.width=this.width;
this.id.style.height=this.height;
this.clientscroll=this.direction>1?this.id.scrollwidth:this.id.scrollheight;
this.id.innerhtml+=this.id.innerhtml;
this.start(this,this.timer,this.waittime,this.stoptime);
}
marquee.prototype.start=function(msobj,timer,waittime,stoptime){
msobj.startid=function(){msobj.scroll();}
msobj.continue=function(){
    if(msobj.mouseover==1){settimeout(msobj.continue,waittime);}
    else{clearinterval(msobj.timerid); msobj.ctl=msobj.stop=0; msobj.timerid=setinterval(msobj.startid,timer);}
    }
msobj.pause=function(){msobj.stop=1; clearinterval(msobj.timerid); settimeout(msobj.continue,waittime);}
msobj.begin=function(){
    msobj.timerid=setinterval(msobj.startid,timer);
    msobj.id.onmouseover=function(){msobj.mouseover=1; clearinterval(msobj.timerid);}
    msobj.id.onmouseout=function(){msobj.mouseover=0; if(msobj.stop==0){clearinterval(msobj.timerid); msobj.timerid=setinterval(msobj.startid,timer);}}
    }
settimeout(msobj.begin,stoptime);
}
marquee.prototype.scroll=function(){
switch(this.direction){
    case 0:
      this.ctl+=this.step;
      if(this.ctl>=this.scrollstep&&this.waittime>0){this.id.scrolltop+=this.scrollstep+this.step-this.ctl; this.pause(); return;}
      else{if(this.id.scrolltop>=this.clientscroll) this.id.scrolltop-=this.clientscroll; this.id.scrolltop+=this.step;}
      break;
    case 1:
      this.ctl+=this.step;
      if(this.ctl>=this.scrollstep&&this.waittime>0){this.id.scrolltop-=this.scrollstep+this.step-this.ctl; this.pause(); return;}
      else{if(this.id.scrolltop<=0) this.id.scrolltop+=this.clientscroll; this.id.scrolltop-=this.step;}
      break;
    case 2:
      this.ctl+=this.step;
      if(this.ctl>=this.scrollstep&&this.waittime>0){this.id.scrollleft+=this.scrollstep+this.step-this.ctl; this.pause(); return;}
      else{if(this.id.scrollleft>=this.clientscroll) this.id.scrollleft-=this.clientscroll; this.id.scrollleft+=this.step;}
      break;
    case 3:
      this.ctl+=this.step;
      if(this.ctl>=this.scrollstep&&this.waittime>0){this.id.scrollleft-=this.scrollstep+this.step-this.ctl; this.pause(); return;}
      else{if(this.id.scrollleft<=0) this.id.scrollleft+=this.clientscroll; this.id.scrollleft-=this.step;}
      break;
    }
}
</script>

</body>
</html>

方法三

<script>
window.onload=function(){
new marquee(
    "divg", //容器id
    0, //向上滚动(0向上 1向下 2向左 3向右)
    2, //滚动的步长
    200, //容器可视宽度
    36, //容器可视高度
    50, //定时器数值越小，滚动的速度越快(1000=1秒,建议不小于20)
    2000, //间歇停顿时间(0为不停顿,1000=1秒)
    1000, //开始时的等待时间(0为不等待,1000=1秒)
    18 //间歇滚动间距(可选)
    );
};
function marquee(){
this.id=document.getelementbyidx(arguments[0]);
this.direction=arguments[1];
this.step=arguments[2];
this.width=arguments[3];
this.height=arguments[4];
this.timer=arguments[5];
this.waittime=arguments[6];
this.stoptime=arguments[7];
if(arguments[8])
    this.scrollstep=arguments[8];
else
    this.scrollstep=this.direction>1?this.width:this.height;
this.ctl=this.startid=this.stop=this.mouseover=0;
this.id.style.overflowx=this.id.style.overflowy="hidden";
this.id.nowrap=true;
this.id.style.width=this.width;
this.id.style.height=this.height;
this.clientscroll=this.direction>1?this.id.scrollwidth:this.id.scrollheight;
this.id.innerhtml+=this.id.innerhtml;
this.start(this,this.timer,this.waittime,this.stoptime);
}
marquee.prototype.start=function(msobj,timer,waittime,stoptime){
msobj.startid=function(){
    msobj.scroll();
    }
msobj.continue=function(){
    if(msobj.mouseover==1)
      settimeout(msobj.continue,waittime);
    else{
      clearinterval(msobj.timerid);
      msobj.ctl=msobj.stop=0;
      msobj.timerid=setinterval(msobj.startid,timer);
      }
    }
msobj.pause=function(){
    msobj.stop=1;
    clearinterval(msobj.timerid);
    settimeout(msobj.continue,waittime);
    }
msobj.begin=function(){
    msobj.timerid=setinterval(msobj.startid,timer);
    msobj.id.onmouseover=function(){
      msobj.mouseover=1;
      clearinterval(msobj.timerid);
      }
    msobj.id.onmouseout=function(){
      msobj.mouseover=0;
      if(msobj.stop==0){
        clearinterval(msobj.timerid);
        msobj.timerid=setinterval(msobj.startid,timer);
        }
      }
    }
settimeout(msobj.begin,stoptime);
}
marquee.prototype.scroll=function(){
switch(this.direction){
    case 0:
      this.ctl+=this.step;
      if(this.ctl>=this.scrollstep&&this.waittime>0){
        this.id.scrolltop+=this.scrollstep+this.step-this.ctl;
        this.pause();
        return;
        }
      else{
        if(this.id.scrolltop>=this.clientscroll)
          this.id.scrolltop-=this.clientscroll;
        this.id.scrolltop+=this.step;
        }
      break;
    case 1:
      this.ctl+=this.step;
      if(this.ctl>=this.scrollstep&&this.waittime>0){
        this.id.scrolltop-=this.scrollstep+this.step-this.ctl;
        this.pause();
        return;
        }
      else{
        if(this.id.scrolltop<=0)
          this.id.scrolltop+=this.clientscroll;
        this.id.scrolltop-=this.step;
        }
      break;
    case 2:
      this.ctl+=this.step;
      if(this.ctl>=this.scrollstep&&this.waittime>0){
        this.id.scrollleft+=this.scrollstep+this.step-this.ctl;
        this.pause();
        return;
        }
      else{
        if(this.id.scrollleft>=this.clientscroll)
          this.id.scrollleft-=this.clientscroll;
        this.id.scrollleft+=this.step;
        }
      break;
    case 3:
      this.ctl+=this.step;
      if(this.ctl>=this.scrollstep&&this.waittime>0){
        this.id.scrollleft-=this.scrollstep+this.step-this.ctl;
        this.pause();
        return;
        }
      else{
        if(this.id.scrollleft<=0)
          this.id.scrollleft+=this.clientscroll;
        this.id.scrollleft-=this.step;
        }
      break;
    }
}
</script>
<style type="text/css">
.linkbluebg:link,.linkbluebg:visited{color:#1673a7;
text-decoration:none;
height:18px;
}
.linkbluebg:hover,.linkbluebg:active{
color:#ffffff;
text-decoration:none;
height:18px;
background-color:#1673a7;}
</style>
<div id="divg">
     <a href="http://www.111cn.net/" class="linkbluebg" target="_blank">·q123音乐在线</a><br />
     <a href="http://www.111cn.net/" class="linkbluebg" target="_blank">·y123y123flash音乐</a><br />
      <a href="http://www.111cn.net/" class="linkbluebg" target="_blank">·好779音乐-非主流音乐，经典再现</a><br />

刷新页面返回顶部

Lzhdim's Fashion

公告

文字向上间歇滚动三种js代码