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  居然已存在  阅读(1157)  评论(0)  编辑  收藏  举报