HTML标签marquee实现滚动效果 - *茉莉花开*-html教程-PHP中文网

HTML标签marquee实现滚动效果 - *茉莉花开*

php中文网

发布： 2016-05-20 16:50:29

原创

1615人浏览过

html标签 - 可以实现多种滚动效果，无需js控制。使用marquee标记不仅可以移动文字，也可以移动图片，表格等.只需要在内部输入要滚动的内容即可。

一、标签属性

1.滚动方向direction（包括4个值：up、 down、 left和 right）

　　语法：...

2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）

　　语法：...

立即学习“前端免费学习笔记（深入）”；

3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位；如果没有它，默认为6，建议设为1～3比较好。）

　　语法：...

4.滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒，通常scrolldelay是不需要设置的。）

　　语法：...

5.滚动循环loop（默认值是-1，滚动会不断的循环下去）

　　语法：...

6.滚动范围width、height

7.滚动背景颜色bgcolor

8.空白空间hspace、vspace

讯飞智作-讯飞配音

讯飞智作是一款集AI配音、虚拟人视频生成、PPT生成视频、虚拟人定制等多功能的AI音视频生产平台。已广泛应用于媒体、教育、短视频等领域。

查看详情

二、事件

1.onmouseout()=“this.start()”:用来设置鼠标移出改区域时继续滚动

2.onmouseover()=“this.stop()”:用来设置鼠标移入改区域时停止滚动

三、实例

1.给滚动字幕添加超链接

<span style="font-size: 18px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">marquee </span><span style="color: #ff0000;">scrollAmount</span><span style="color: #0000ff;">=2 </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">=300</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=http://www.cctv.com</span><span style="color: #0000ff;">></span>中央电视台<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">marquee</span><span style="color: #0000ff;">></span></span>

登录后复制

2.鼠标停留在文字上，文字停止滚动

<span style="font-size: 18px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">marquee </span><span style="color: #ff0000;">scrollAmount</span><span style="color: #0000ff;">=2 </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">=300 </span><span style="color: #ff0000;">onmouseover</span><span style="color: #0000ff;">=stop() </span><span style="color: #ff0000;">onmouseout</span><span style="color: #0000ff;">=start()</span><span style="color: #0000ff;">></span>文字内容<span style="color: #0000ff;"></</span><span style="color: #800000;">marquee</span><span style="color: #0000ff;">></span></span>

登录后复制

3.多行文本向上滚动

<span style="font-size: 16px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">marquee </span><span style="color: #ff0000;">scrollAmount</span><span style="color: #0000ff;">=2 </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">=300 </span><span style="color: #ff0000;">height</span><span style="color: #0000ff;">=160 </span><span style="color: #ff0000;">direction</span><span style="color: #0000ff;">=up</span><span style="color: #0000ff;">></span>&middot;早晨好啊！<span style="color: #0000ff;"><</span><span style="color: #800000;">br</span><span style="color: #0000ff;">></span>&middot;空气好清新啊<span style="color: #0000ff;"><</span><span style="color: #800000;">br</span><span style="color: #0000ff;">></span>&middot;今朝食乜好呢？<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>&middot;<span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=http://www.cctv.com</span><span style="color: #0000ff;">></span>中央电视台<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">marquee</span><span style="color: #0000ff;">></span></span>　　<a id="d" style="font-size: 18px; font-family: verdana, Arial, Helvetica, sans-serif; line-height: 1.5; background-color: #ffffff;"></a>

登录后复制

　　注意：如果你的网页经过了FrontPage编辑，保存之后，只能滚动一行，这时候你发现你原来的代码顺序已经变了，My god！解决的办法是，找出原来的代码，把它嵌入到JavaScript的document.write中即可，上述代码写为：

<span style="font-size: 16px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #000000;">
    document.write(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">
        <marquee scrollAmount=2 width=300 height=160 direction=up>
        &middot;早晨好啊！<br>
        &middot;空气好清新啊<br>
        &middot;今朝食乜好呢？<p>
        &middot;<a href=http://www.cctv.com>中央电视台</a>
</marquee>
    </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>       </span>

登录后复制

/*参考资料：

*1.http://www.cnblogs.com/mountain-mist/articles/975781.html

*2.http://www.cnblogs.com/zzuIvy/p/marqueeTest_1.html