• 欢迎@方程式 @小云 加入我们
  • Register

js跑马灯循环滚动效果大全

什么都不说,先上DEMO演示:

<html>
<head>
 <title>跑马灯大全 杨俊伟 yangjunwei.com</title>
 <script LANGUAGE="JavaScript">
  var Mes=new Array();
  Mes[0]="欢迎你! yangjunwei.com";
  Mes[1]="感谢关注杨俊伟 ";
  Mes[2]="网页制作技巧 之 跑马灯大全 ";
  var place=1;
  var i=0;
  function scroll(){
   window.status=Mes[i].substring(0, place);
   if (place >= Mes[i].length){
    if(i<2){
     i++;
     place=1;
     window.setTimeout("scroll()",50);
    }else{
     i=0;
     place=1;
     window.setTimeout("scroll()",50);
    }
   }else{
    place++;
    window.setTimeout("scroll()",50);
   }
  }
 </script>
</head>
<body onload="scroll();">
<form name="shooterform" method="get">
 <marquee>滚动的文字</marquee>
 <marquee behavior=alternate>表示双向移动</marquee>
 <marquee direction=left>表示运动方向向左</marquee>
 <marquee width=400 behavior=alternate direction=left align=middle border=1>弹来弹去跑马灯!</marquee>
 <marquee scrollamount="30">表示运动方向向左</marquee>
 <marquee width=90%>
  <a href="http://yangjunwei.com" target=_blank>带有超链接的跑马灯!点我试试?</a><br />
  <a href="http://yangjunwei.com" target=_blank>还有一条呢!点我试试?</a>
 </marquee>
 
 <table width="93%" border="1" cellspacing="0" cellpadding="1" align="center">
  <tr>
   <td width="42%">参数</td>
   <td width="58%">用法介绍</td>
  </tr>
  <tr>
   <td width="42%">behavior=scroll, slide, alternate</td>
   <td width="58%">跑马方式:循环绕行,只跑一次就停住,来回往复运动</td>
  </tr>
  <tr>
   <td width="42%">direction=left,right</td>
   <td width="58%">跑马方向:从左向右,从右向左</td>
  </tr>
  <tr>
   <td width="42%">loop=100</td>
   <td width="58%">跑马次数:循环100次,如不写默认为一直循环</td>
  </tr>
  <tr>
   <td width="42%">width=100%,height=200</td>
   <td width="58%">跑马范围:宽为100%,高为200像素</td>
  </tr>
  <tr>
   <td width="42%">scrollamount=20</td>
   <td width="58%">跑马速度:数越大越快</td>
  </tr>
  <tr>
   <td width="42%">scrolldelay=500</td>
   <td width="58%">跑马延时:毫秒数,利用它可实现跃进式滚动</td>
  </tr>
  <tr>
   <td width="42%">hspace=20,vspace=20</td>
   <td width="58%">跑马区域与其它区域间的空白大小</td>
  </tr>
  <tr>
   <td width="42%">bgcolor=#00FFCC</td>
   <td width="58%">跑马区域的背景颜色</td>
  </tr>
 </table>
</form>
</body>
</html>
版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/155.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

2 条评论 »

发表评论 

我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册