HTML<marquee>标签实现滚动公告通知、广告的效果

每当实现页面的时候遇到动态效果,首先想到的就是用js、jQuery插件来实现,之前为了实现公告通知从下往上轮播,搜了不少插件,但是都没有合适的,无意中搜到一个html标签<marquee></marquee>,可以实现这个滚动效果。

说一下marquee的属性:

  behavior设定滚动的方式:

    alternate:来回滚动。
    scroll:   重复滚动。
    slide:    不重复滚动。

  bgcolor 设定活动字幕的背景颜色。

  direction设定活动字幕的滚动方向:

    up、down、left、right。

  width  设置活动字母的宽度。

  height 设置活动字母的高度。

  loop设定滚动的次数,当loop=-1表示一直滚动下去,默认为-1。

  scrollamount设定活动字幕的滚动速度,单位pixels。

  scrolldelay设定活动字幕滚动两次之间的延迟时间,单位millisecond(毫秒)值大了会有一步一停顿的效果。

marquee常用到的两个事件:
  onMouseOut="this.start()" 当鼠标移出该区域时
  onMouseOver="this.stop()" 当鼠标移入该区域时

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <marquee direction="up" behavior="scroll" scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="0" loop="-1" width="211" height="125">
                我是滚动的字幕
        </marquee>
    </body>
</html>

 

posted @ 2016-03-29 10:05  居然已存在  阅读(1151)  评论(0编辑  收藏  举报