marquee标签
marquee标签是用来实现多种滚动的效果，无需JS控制。使用marquee标记不仅可以移动文字，也可以移动图片，表格等等。只需要在<marquee></marquee>内部输入要控制的内容就可以了。
一、标签属性
1、滚动方向direction（包括4个值：up、dowm、left、right） 语法：<marquee direction="滚动方向">...</marquee>
2、滚动方式behavior（scroll:循环滚动，默认效果；slide：只滚动一次就停止；alternate:来回交替进行滚动） 语法:<marquee behavior="滚动方式">...</marquee>
3、滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位；如果没有它，默认为6，建设为1~3比较好。）语法：<marquee scrollamount="5">...</marquee>
4、滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒，通常scrolldelay是不需要设置的。）语法:<marquee scrolldelay="100">...</marquee>
5、滚动循环loop（默认值是-1，滚动会不断的循环下去）语法：<marquee loop="2">...</marquee>
6、滚动范围width、height
7、滚动背景颜色bgcolor
8、空白空间hspace、vspace
二、事件
1.onmouseout()="this.start()"：用来设置鼠标移出改区域时继续滚动
2.onmouseover()="this.stop()"：用来设置鼠标移入改区域时停止滚动
三、实例
1、给滚动字幕添加超链接
<marquee scrollAmount=2 width=300><a href="http://www.baidu.com">百度</a></marquee>
2、鼠标停留在文字上，文字停止滚动
<marquee scrollAmount=2 width=300 onmouseover=stop() onmouseout=start()>文字内容</marquee>
3、多行文本向上滚动
<marquee scrollAmount=2 width=300 height=160 direction=up>·早晨好啊！<br>·空气好清新啊<br>·今朝食乜好呢？<p>·<a href=http://www.cctv.com>中央电视台</a></marquee>
需要注意下：如果你的网页经过了FrontPage编辑，保存之后，只能滚动一行，这时候你发现你原来的代码顺序会发生变化，My god解决的办法是，找出原来的代码，找出原来的代码，把它嵌入到javascript的document.write中即可，上述代码为:
<script> document.write(' <marquee scrollAmount=2 width=300 height=160 direction=up> ·早晨好啊！<br> ·空气好清新啊<br> ·今朝食乜好呢？<p> ·<a href=http://www.cctv.com>中央电视台</a> </marquee> ') </script>
四、案例
.scroll_news { height:30px; width:100%; border:#e3e3e3 1px solid; box-shadow:#979595 2px 2px 2px 2px; } .scroll_news span { float:left; height:30px; line-height:30px; color:#b81c22; font-size:16px; padding-left:10px; margin-right:-70px; } .scroll_con { height:30px; line-height:30px; font-size:9px; padding-left:10px; float:left; margin-left:70px; } .scroll_con a { color:#000000; } .scroll_con a:hover { color:#FF0000; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title>简单的滚文字动-jq22.com</title> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div class="scroll_news"> <span><i class="fa fa-bullhorn" aria-hidden="true"></i> 提醒</span> <marquee scrollamount="3" scrolldelay="0" direction="left" class="scroll_con" onmouseout="this.start()" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" onmouseover="this.stop()"> <a href="###"><i class="fa fa-circle" aria-hidden="true"></i> 超经典科幻大片重启！百分百必看</a> <a href="###"><i class="fa fa-circle" aria-hidden="true"></i> 首发立减700元！AMD次旗舰来了：功耗大亮</a> </marquee> </div> </body> </html>
