HTML标签marquee实现文字滚动效果

由于本站的文字公告较长,在手机端无法正常显示,所以乐朦谷歌百度一通之后发现一个HTML标签<marquee>可以实现文字滚动效果,不需要加载Javascript就可以实现文字滚动效果,本站首页文字公告就是用这个标签实现的:

基本用法

<marquee>滚动文字</marquee>
实现文字滚动。

marquee参数:

bgcolor: 滚动文本框的背景颜色;
direction:滚动方向设置,表示滚动的方向,默认为从右向左,可设置Left、Right、up和down;
scrolldelay:这也是用来控制速度的,默认为85,值越大,速度越慢。通常scrollDelay是不需要设置的;
scrollamount:它表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好;
behaviour:滚动的方式设置,Scroll(循环滚动)\ lide(单次滚动)\Alternate(来回滚动);
align:文字的对齐方式设置,可选择Middle(居中)\Bottom(居下)\Top(居上);
width:滚动文本框的宽度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比);
height:滚动文本框的高度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比),做垂直滚动时一定要设置height;
loop:滚动次数,默认为infinite(无限);
hspace、vspace:前后、上下的空行;

用法实例

1.给滚动文字增加超链接:只需将滚动文字用<a>标签包围即可,如下:
<marquee ><a href="https://lerm.net">滚动文字</a></marquee>
2.鼠标悬停时停止滚动:<marquee >标签增加鼠标事件 onmouseover=stop() onmouseout=start();如下
<marquee direction="left" scrollamount="5" width="300">滚动文字</marquee>
3.多行文本向上滚动:设置方向为direction="up"height,然后再没滚动的每行文字后增加<br/>标签,如下:<marquee direction="up" height="600" >滚动文字<br />滚动文字<br />滚动文字<br /></marquee>
<marquee>是个神奇的让人着迷的标签,还可以实现图片滚动,请根据需要任意发挥。

Warning:在FIrefox下鼠标悬停貌似不起作,谁有办法,另外W3C标准不支持这个标签关于marquee标签更过信息可以看W3C上的说the-marquee-element

发表评论

游客欢迎您123