html跑马灯⾛马灯效果
实现跑马灯的⽅法很多，其中最简单的是采⽤⼀句Html代码来实现，我们在需要出现跑马灯效果的地⽅插⼊“<marquee>滚动的⽂字</marquee>”语句，它的效果如下所⽰：
<marquee> 滚动的⽂字</marquee>
适当的运⽤<marquee>标签的参数，可以表现出不同的效果，请看下⾯的⼏个例⼦：
1、左右弹来弹去的跑马灯
<marquee width="400" ><span >弹来弹去跑马灯!</span>
</marquee>
实现的⽅法就是在IE的标签上稍微多加了⼏个参数产⽣了更加丰富的变化。设置behavior=alternate表
⽰双向移动，direction= left表⽰运动⽅向向左。marquee的宽度可以使⽤绝对象素值，例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在 Netscape下是看不到的。
源码粘贴框：
<marquee width=400 behavior=alternate direction=left align=middle>弹来弹去跑马灯!</marquee>
２、跑的很快的跑马灯
<marquee ><span >跑的很快跑马灯!</span>
</marquee>
只要在<marquee>标签后⾯加上“scrollamount=15”即可，修改=后边的数字参数即可限制⽂字移动的速度。
３、带有超级链接的跑马灯
<marquee width="90%" ><span ><a
href="www.taobaojp5.tk/" target="_blank" ></a><a
href="www.taobaojp5.tk/" >带超级链接的跑马灯!点我试试？</a><a
href="www.taobaojp5.tk/" ></a> <a
href="www.taobaojp5.tk/" target="_blank" ></a><a
href="www.taobaojp5.tk/" >还有⼀条呢!点我试试？</a></span>
html滚动效果代码</marquee>
实现的⽅法很简单，把整个<marquee></marquee>语句包含在超链接中就⾏，你看看下⾯的代码就清楚了。当然你也可以把包含在<marquee>
</marquee>中的各条内容分别加上不同的链接，这样的跑马灯就可⽤来发布滚动新闻或是做站点导航了。
如果你想给跑马灯的⽂字加上颜⾊，换⽤不同的字体（默认是宋体，换体就要加代码），只要在⽂字前加上<FONT face=楷体_GB2312 color=#ff0000 size=3>就⾏了，你可在“face=”后边换上你喜欢的字体，在“color=”后边换上你喜欢的字颜⾊，在“size=”后边换上适合的字号，如果想让字体加粗，就再加上<STRONG>。
<wbr ><span ></span><wbr ><span style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px; background-color:rgb
(248,248,248)"></span><wbr ><span >请看⼀下效果：</span><marquee width="400"
>
<span ><strong><a href="www.taobaojp5.tk/" target="_blank" ></a><a href="www.taobaojp5.tk/" ><span ><strong>带超级链接的跑马灯!点我试试？</strong></span></a><a href="www.taobaojp5.tk/" style="text-decoration:none;
color:rgb(106,63,48)"></a></strong></span> <a href="www.taobaojp5.tk/" target="_blank" ></a><a href="www.taobaojp5.tk/" >还有⼀条呢!点我试试</a><a href="www.taobaojp5.tk/" >？</a> </marquee><span ></span> <p align="left" > <span
><span ><span > 上⾯效果的代码码如下：</span></span></span></p> <p align="center" style="margin-top:0px; margin-bottom:5px; padding-top:0px; padding-bottom:0px; bor
der:0px; list-style:none; word-wrap:normal; word-break:normal; line-height:21px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(248,248,248)"> <span ><marquee width=400 scrollamount=2> <a href=<a
href="www.taobaojp5.tk/" target="_blank" >www.taobaojp5.tk</a>><FONT face=楷体_GB2312 color=#ff0000
size=3><STRONG>；带有超链接的跑马灯!点我试试？</a> <a href=954872988.qzone.qq/；还有⼀条呢!点我试试？</FONT></STRONG></a> </marquee></span></p> <p align="left" > <span ><span ><span style="font-size:14px; word-wrap:normal;
word-break:normal; line-height:24px"> 以上⼏个例⼦都是<marquee>；标签参数的应⽤，下⾯把所有可以利⽤的参数列在表中供你参考，不过还是要提醒你，<marquee>；标签只被IE所⽀持，使⽤Netscape浏览器是看不到的噢。</span></span></span></p> <table cellspacing="0" cellpadding="1" width="93%" align="center" border="1" ><tbody> <tr> <td width="42%"
> <span >参数</span> </td> <td width="58%"
> <span >⽤法介绍</span> </td> </tr> <tr> <td width="42%" > <span style="font-size:14px;
color:#000000; word-wrap:normal; word-break:normal; line-height:24px">behavior=scroll, slide, alternate</span> </td> <td width="58%" > <span >跑马⽅式：循环绕⾏，只跑⼀次就停住，来回往复运动</span> </td> </tr> <tr> <td width="42%" > <span >direction=left,right</span> </td> <td width="58%" > <span >跑马⽅向：从左向右，从右向左</span> </td> </tr> <tr> <td width="42%" > <span >loop=100</span> </td> <td width="58%" > <span style="font-size:14px; color:#000000; wor
d-wrap:normal; word-break:normal; line-height:24px">跑马次数：循环100次，如不写默认为⼀直循环</span> </td> </tr> <tr> <td width="42%"
> <span >width=100%,height=200</span> </td> <td
width="58%" > <span >跑马范围：宽为100%，⾼为200像素
</span> </td> </tr> <tr> <td width="42%" > <span >scrollamount=20</span> </td> <td width="58%" style="margin:0px; padding:0px; font-f
amily:Verdana，宋
体,sans-serif; line-height:18px"> <span >跑马速度：数越⼤越快</span> </td> </tr> <tr> <td width="42%" > <span >scrolldelay=500</span> </td> <td width="58%" > <span >跑马延时：毫秒数，利⽤它可实现跃进式滚动</span> </td> </tr> <tr> <td width="42%"
> <span >hspace=20，vspace=20</span> </td> <td
width="58%" > <span >跑马区域与其它区域间的空⽩⼤⼩</span> </td> </tr> <tr> <td width="42%" >
<span >bgcolor=#00FFCC</span> </td> <td width="58%" > <span >跑马区域的背景颜⾊</span> </td> </tr> <tr> <td > face=楷体_GB2312</td> <td > 跑马灯⽂字字体</td> </tr> <tr> <td > color=#ff0000</td> <td > 跑马灯⽂字颜⾊</td> </tr> <tr> <td style="margin:0px; padding:0px;
font-family:Verdana，宋体,sans-serif; line-height:18px"> size=3</td> <td > 跑马灯⽂字字号</td> </tr> <tr> <td >
STRONG</td> <td > 跑马灯⽂字加粗
</td> </tr> </tbody></table> <p align="left" > <span ><span ><span > 你已经看到，尽管<marquee>；参数不少，但毕竟不能实现复杂的和⾃定义的特殊跑马灯效果，⽽且还有浏览器限制，所以我们更多情况下
会采⽤JavaScript来实现跑马灯。</span></span></span></p> <p align="left" > <wbr></wbr></p> <p align="left" > <wbr></wbr></p> <p
align="left" > <span ><strong><span >以上个⼈总结，可以将此特效⽤到淘宝公告上去，显的专业也⽐较好看，尤其是拓展版⽤这个代码我觉得还是⽐较炫的，放在头部，或者宝贝描述⾥⾯都⾮常恰当，其余靠⾃⼰想象了，万事要靠⾃⼰哦~</span></strong></span></p> <br><br></wbr></wbr></wbr>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论