现跑马灯的方法很多，其中最简单的是采用一句Html代码来实现，我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句，它的效果如下所示：

滚动的文字

适当的运用<marquee>标签的参数，可以表现出不同的效果，请看下面的几个例子：

1、左右弹来弹去的跑马灯

弹来弹去跑马灯! 实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动，direction= left表示运动方向向左。marquee的宽度可以使用绝对象素值，例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在 Netscape下是看不到的。

源码粘贴框：

<marquee width=400 behavior=alternate direction=left align=middle>弹来弹去跑马灯!</marquee>

２、跑的很快的跑马灯

跑的很快跑马灯!　 只要在<marquee>标签后面加上“scrollamount=15”即可,修改=后边的数字参数即可限制文字移动的速度。

３、带有超级链接的跑马灯

带超级链接的跑马灯!点我试试？ 还有一条呢!点我试试？　 实现的方法很简单，把整个<marquee></marquee>语句包含在超链接中就行，你看看下面的代码就清楚了。当然你也可以把包含在<marquee></marquee>中的各条内容分别加上不同的链接，这样的跑马灯就可用来发布滚动新闻或是做站点导航了。

如果你想给跑马灯的文字加上颜色，换用不同的字体（默认是宋体，换体就要加代码），只要在文字前加上<FONT face=楷体_GB2312 color=#ff0000 size=3>就行了，你可在“face=”后边换上你喜欢的字体，在“color=”后边换上你喜欢的字颜色，在“size=”后边换上适合的字号，如果想让字体加粗，就再加上<STRONG>。

请看一下效果： 带超级链接的跑马灯!点我试试？ 还有一条呢!点我试试？ 上面效果的代码码如下：

<marquee width=400 scrollamount=2> <a href=http://www.taobaojp5.tk><FONT face=楷体_GB2312 color=#ff0000 size=3><STRONG>带有超链接的跑马灯!点我试试？</a> <a href=http://954872988.qzone.qq.com/;还有一条呢!点我试试？</FONT></STRONG></a> </marquee>

以上几个例子都是<marquee>标签参数的应用，下面把所有可以利用的参数列在表中供你参考，不过还是要提醒你，<marquee>标签只被IE所支持，使用Netscape浏览器是看不到的噢。

参数用法介绍behavior=scroll, slide, alternate跑马方式：循环绕行，只跑一次就停住，来回往复运动direction=left,right跑马方向：从左向右，从右向左loop=100跑马次数：循环100次，如不写默认为一直循环width=100%,height=200跑马范围：宽为100%，高为200像素scrollamount=20跑马速度：数越大越快scrolldelay=500跑马延时：毫秒数，利用它可实现跃进式滚动hspace=20，vspace=20跑马区域与其它区域间的空白大小bgcolor=#00FFCC跑马区域的背景颜色face=楷体_GB2312跑马灯文字字体color=#ff0000跑马灯文字颜色size=3跑马灯文字字号STRONG跑马灯文字加粗

你已经看到，尽管<marquee>参数不少，但毕竟不能实现复杂的和自定义的特殊跑马灯效果，而且还有浏览器限制，所以我们更多情况下会采用JavaScript来实现跑马灯。

/郭远明

我们时常能看到有些网站只要鼠标经过，就会逐个点亮，鼠标一离开，就会变暗，这种效果就是跑马灯效果。具体要怎么实现呢？且看源代码和操作步骤，轻松搞定炫酷吊炸天的跑马灯：

1.首先将鼠标光标放置在需要实现跑马灯效果的设计页面上，然后插入两个层（即div）和左右两个超链接，源代码如下：

<div id="roll">

<a href="javascript：;"id="left">左</a>

<a href="javascript：;"id="right">右</a>

<div class="warp">

</div>

</div>

2.在层里面插入项目列表和6张需要进行滚动的图片，源代码如下：

<ul>

<li><img src="1.jpg"width="150"height="150"/></li>

<li><img src="2.jpg"width="150"height="150"/></li>

<li><img src="3.jpg"width="150"height="150"/></li>

<li><img src="4.jpg"width="150"height="150"/></li>

<li><img src="5.jpg"width="150"height="150"/></li>

<li><img src="6.jpg"width="150"height="150"/></li>

</ul>

3.切换到代码视图页面，输入如下代码：

<style>

body,div,ul,li{margin:0;padding:0;}

ul,li{list-style-type:none;}

#roll{width:600px;margin:120px auto;position:relative;}

.warp{width:600px;border:1px solid

#000;height:150px;text-align:center;overflow:hidden;position:relative;}

#roll

li{float:left;width:150px;height:150px;line-height:150px;background:#aacccc;margin-right:5px}

#roll #left{position:absolute;left:-25px;top:0px;display:block;height:150px;}

#roll #right{position:absolute;left:-25px;top:0px;display:block;height:150px;}

#roll ul{position:absolute;left:0px;top:0px;}

</style>

4.还需要加入JavaScript代码来实现效果：

<script>

function $(id){return document.getElementById(id);}

window.onload=function(){

var oDiv=$("roll");

var oUl=oDiv.getElementByTagName("ul")[0];

var oLi=oUl.getElementByTagName("li");

var oBtnL=$("left");

var oBtnR=$("right");

var timer=null;

var iSpeed=-2;//滚动速度，数字越大，滚动越快！

oUl.innerHTML+=oUl.innerHTML;

oUl.style.width=(oLi[0].offsetWidth+5)*oLi.length+"px";

timer=setInterval(function){

oUl.style.left=oUl.offsetLeft+iSpeed+"px";

if(oUl.offsetLeft<-oUl.offsetWidth/2){

oUl.style.left="0px";

}

else if(oUl.offsetLeft>0){

oUl.style.left=-oUl.offsetWidth/2+"px";

};

},30);

oBtnL.onmouseover=function(){ iSpeed=-2;}

oBtnR.onmouseover=function(){ iSpeed=2;}

};

</script>

这就轻松搞定6张图片的跑马灯效果了！看着比较复杂，其实很多语言跟英语和逻辑是直接关联的，像“function（）”函数就是调用一个统一的代码块，像“if”语句就是用来判断情况分别执行的代码，而一些诸如“left”、“right”、”width”、“height”纯粹就是英文标注了。

轻松学号语法巧用代码，就可以实现很多炫酷的网页效果了！

本文由郭远明授权发布，欢迎分享和转载；转载请注明出处！