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

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

基本用法

实现文字滚动。

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>标签包围即可,如下:

2.鼠标悬停时停止滚动:在<marquee>标签增加鼠标事件 onmouseover=stop() onmouseout=start();如下

3.多行文本向上滚动:设置方向为direction=”up” 和height,然后再没滚动的每行文字后增加<br>标签,如下

<marquee>是个神奇的让人着迷的标签,还可以实现图片滚动,请根据需要任意发挥。

Warning:在FIrefox下鼠标悬停貌似不起作,谁有办法,另外W3C标准不支持这个标签关于marquee标签更过信息可以看W3C上的说the-marquee-element
  • 打赏
  • 评论 0
  • 分享
  • 点赞 0
转载请注明出处: HTML标签marquee实现文字滚动效果 | 乐朦

欢迎评论