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

最新推荐文章于 2024-04-30 13:14:52 发布

antang1769

最新推荐文章于 2024-04-30 13:14:52 发布

阅读量3.4k

点赞数 3

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lxgandlz/p/5331896.html

版权

每当实现页面的时候遇到动态效果，首先想到的就是用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>

转载于:https://www.cnblogs.com/lxgandlz/p/5331896.html

antang1769

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML<marquee>标签实现滚动公告通知、广告的效果

每当实现页面的时候遇到动态效果，首先想到的就是用js、jQuery插件来实现，之前为了实现公告通知从下往上轮播，搜了不少插件，但是都没有合适的，无意中搜到一个html标签<marquee></marquee>，可以实现这个滚动效果。说一下marquee的属性：　　behavior设定滚动的方式：　　　　alternate：来回滚动。　　　　scroll...
复制链接

扫一扫