当前位置:编程学习 > JS >>

文字向上间歇滚动三种js代码(1/2)

<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,zhaoxi.org,sky,www.zzzyk.com,站长特效 网" />
<meta name="description" content="www.zzzyk.com,站长特效网,站长必备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>,站长必备的高质量网页特效和广告代码。zhaoxi.org,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzzyk.com,zzjs@msn.com,用.net打造靓站-->
国家 汇率名称 今日汇率
<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.zzzyk.com,很好记,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>
 

1 2
补充:网页制作,js教程 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,