现跑马灯的方法很多，其中最简单的是采用一句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来实现跑马灯。

tml代码：

<div class="scroll_vertical">

<p class="title">小律正在智能运算 ··· ···</p>

<div class="box">

<ul class="list">

<li>('劳动争议', 0.476702), ('婚姻家庭', 0.13224116) </li>

<li>('劳动争议', 0.234234), ('婚姻家庭', 0.54656465) </li>

<li>('劳动争议', 0.675675), ('婚姻家庭', 0.435345) </li>

<li>('劳动争议', 0.234234), ('婚姻家庭', 0.456456) </li>

<li>('劳动争议', 0.234234), ('婚姻家庭', 0.13256756724116) </li>

<li>('劳动争议', 0.123123), ('婚姻家庭', 0.345345) </li>

<li>('劳动争议', 0.345636), ('婚姻家庭', 0.23452344) </li>

<li>('劳动争议', 0.678979), ('婚姻家庭', 0.13224116) </li>

</ul>

</div>

</div>

jquery代码：

//播放速度

var speed = 2000;

//控制范围，符合jQuery路径即可

var block = '.list li';

//需要显示的内容条目数

var eq = 6;

var h = 0;

if($(block).length > eq){

$(block).slice(eq).css('display','none');

//播放开始

h = setInterval('scrollContent("'+block+'",'+eq+',2)',speed);

}

两天，一直在跟大家侃css3 的动画效果，今天，就跟大家分享一个很不错的跑马灯效果。

第一步：html结构

<div class="container"> 
 <div class="piece-box">
 <div class="piece-box2">
 <div class="piece piece-1"></div>
 <div class="piece piece-2"></div>
 <div class="piece piece-3"></div>
 <div class="piece piece-4"></div>
 <div class="piece piece-5"></div>
 <div class="piece piece-6"></div>
 </div>
 </div>
</div>

第二步： 加上必要的3D属性，进入3D世界

/*容器*/
.container { 
 -webkit-perspective: 1000px; 
 -moz-perspective: 1000px; 
 -ms-perspective: 1000px; 
 perspective: 1000px;

第三步：加入必要的样式

.piece-1 { 
 background: #FF6666; 
 -webkit-transform: rotateY(0deg) translateZ(173.2px); 
 -ms-transform: rotateY(0deg) translateZ(173.2px); 
 -o-transform: rotateY(0deg) translateZ(173.2px); 
 transform: rotateY(0deg) translateZ(173.2px);

第四步：animation让3D动起来

.piece-box2 {

今天，这个效果是我一次偶然的机会发现的，现在，我把它和大家一起分享一下。怎么样，效果还可以吧。