html5实现滚动文字

<i class="icon-notice"></i>

<marquee class="noticeText ng-binding" direction="left" behavior="alternate" scrollamount="100" scrolldelay="1000" loop="5" width="100%" onmouseover="this.stop();" onmouseout="this.start();"  style="width: 100%;">公告:365博客欢迎你的光临
</marquee></div>

1.滚动方向属性 direction 该属性的滚动方向可以设置四个值:up(文字向上)、down(文字向下)、left(文字向左)、right(文字向右)。

 2.滚动方式属性 behavior 该属性的取值有三个值:scroll(循环滚动,默认效果)、slide(只滚动一次就停止)、alternate(来回交替进行滚动) 

3.滚动速度属性 scrollamount 该属性能调整文字滚动的速度,滚动文字的速度实际上是通过设置滚动文字每次移动的长度来实现的,以像素为单位。值只写数字,不带px单位,若带了单位则设置无效。 

4.滚动延迟属性 scrolldelay 该属性用来设置滚动文字滚动的时间间隔(滚动两步之间的时间间隔)。scrolldelay的时间间隔单位是毫秒,取值只写数字 

5.滚动循环属性 loop 设置滚动文字后,默认会无限循环下去,若想控制循环的次数,可设置此属性。 

6.滚动范围属性 width&height 若想控制文字滚动的范围,则可起用这二属性,以像素为单位,不写px单位。默认情况下left和right滚动的width和浏览器窗口同宽,搞定和文字高度同高。up和down时height为浏览器窗口高度的三分之一。 

7.滚动背景颜色属性 bgcolor 此属性为滚动区域设置背景色(取值为十六进制颜色码和英文)。 

8.滚动空间属性 hspace&vspace hsapce属性可以设置滚动范围的水平位置,vspace用来设置滚动范围的垂直位置。单位均为像素,写值时不写单位px。

如下演示:

公告:365博客欢迎你的光临

2022-01-15 16:40:25 通过 网页 浏览(643)

共有0条评论!

发表评论

更换一道题!