<marquee bgcolor="yellow" style="background-color:yellow; color:red">
欢迎光临伟伟的学习小站——博客 真心祝愿所有关心伟伟博客的朋友们心情愉快！
</marquee>
下面开始学习之旅：
实例一 <marquee>Hello, World</marquee> marquee常用到的两个事件： onMouseOut="this.start()" 当鼠标移出该区域时 onMouseOver="this.stop()" 当鼠标移入该区域时 实例二 <marquee onMouseOut="this.start()" onMouseOver="this.stop()">marquee常用到的两个事件</marquee> 下面开始说一下marquee所支持的属性 behavior设定滚动的方式： alternate：来回滚动。 scroll： 重复滚动，默认效果。 slide： 不重复滚动，只滚动一次就停止。 代码如下: <marquee behavior="alternate">来回滚动。 </marquee> <marquee behavior="scroll">重复滚动。</marquee> <marquee behavior="slide">不重复滚动。</marquee> bgcolor设定活动字幕的背景颜色。 代码如下: <marquee bgcolor="#006699">设定活动字幕的背景颜色</marquee> <marquee bgcolor="RGB(10%,50%,100%,)">设定活动字幕的背景颜色 </marquee> <marquee bgcolor="red">设定活动字幕的背景颜色</marquee> direction设定活动字幕的滚动方向 代码如下: <marquee direction="down">设定活动字幕的滚动方向向下</marquee> <marquee direction="left">设定活动字幕的滚动方向向左</marquee> <marquee direction="right">设定活动字幕的滚动方向向右</marquee> <marquee direction="up">设定活动字幕的滚动方向向上</marquee> height设定活动字幕的高度 代码如下: <marquee height="500" direction="down" bgcolor="#CCCCCC">设定活动字幕的高度</marquee> width设定活动字幕的宽度 代码如下: <marquee width="500" bgcolor="#CCCCCC">设定活动字幕的宽度</marquee> loop设定滚动的次数，当loop=-1表示一直滚动下去，默认为-1 代码如下: <marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee> <marquee loop="2" bgcolor="#CCCCCC">我只走两次哦</marquee> scrollamount设定活动字幕的滚动速度，单位pixels（像素） 代码如下: <marquee scrollamount="10" >scrollamount="10" </marquee> <marquee scrollamount="20" >scrollamount="20" </marquee> <marquee scrollamount="30" >scrollamount="30" </marquee> scrolldelay设定活动字幕滚动两次之间的延迟时间，单位millisecond（毫秒） 值大了会有一步一停顿的效果 代码如下: <marquee scrolldelay="10" >scrolldelay="10" </marquee> <marquee scrolldelay="100" > scrolldelay="100"</marquee> <marquee scrolldelay="1000">scrolldelay="1000" </marquee> 空白空间hspace、vspace（像素） <marquee hspace="水平范围" vspace="垂直范围">···</marquee> align对齐 <marquee align="absbottom">align="absbottom"：绝对底部对齐（与g、p等字母的最下端对齐）。 </marquee> <marquee align="absmiddle">align="absmiddle"： 绝对中央对齐。 </marquee> <marquee align="baseline">align="baseline"： 底线对齐。 </marquee> <marquee align="bottom">align="bottom"： 底部对齐（默认）。 </marquee> <marquee align="left">align="left"： 左对齐。 </marquee> <marquee align="middle">align="middle"： 中间对齐。 </marquee> <marquee align="right">align="right"： 右对齐。 </marquee> <marquee align="texttop">align="texttop"： 顶线对齐。 </marquee><marquee align="top">align="top"： 顶部对齐。 </marquee>
marquee 在IE，firefox，chrome ，safari下都能正常的实现走马灯效果，兼容性没有问题
并且两个关键属性scrollamount（滚动速度）direction（滚动方向）
所有浏览器都是支持的
实际上还是有很多效果复杂一点的需要用js去控制：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } .lunbo{ position: relative; width: 600px; height: 50px; border:1px solid red; overflow: hidden; } ul{ position:absolute; left: 0; top:0; width: 600px; height: auto; } ul li{ width: 600px; height: 50px; line-height: 50px; font-size:20px; color:#333; text-align: center } </style> </head> <body> <div class="lunbo"> <ul> <li>人生在世须尽欢 莫使金樽空对月</li> <li>我寄愁心与明月，随风直到夜郎西</li> <li>不是花中偏爱菊，此花开尽更无花</li> <li>辛苦遭逢起一经，干戈寥落四周星</li> <li>山河破碎风飘絮，身世浮沉雨打萍。</li> <li>惶恐滩头说惶恐，零丁洋里叹零丁。</li> <li>人生自古谁无死？留取丹心照汗青。</li> </ul> </div> <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script> <script> function lunbo(id,height){ var ul=$(id); var liFirst=ul.find('li:first'); $(id).animate({top:height}).animate({"top":0},0,function(){ var clone=liFirst.clone(); $(id).append(clone); liFirst.remove(); }) } setInterval("lunbo('ul','-50px')",3000) </script> </body> </html>
