使用 jQuery-Marquee 实现跑马灯（滚动消息）效果

桩白墨
前端笔记
2017-03-24
188热度
0评论

HTML 中有一个 marquee 标签，可以实现跑马灯效果。但不知什么原因，它被废弃了，不在 HTML 标准之内（虽然浏览器仍然支持这个标签）。详见维基百科：https://en.wikipedia.org/wiki/Marquee_element

现在要做跑马灯效果，最好用 JS 来实现，网上有不少示例代码。我找到一款 jQuery 插件，封装了跑马灯的功能，非常好用。可以控制方向、速度、间隔、暂停与恢复……这些选项可以通过标签属性设置，也可以通过在 JS 中向构造函数传参设置。详细说明参见 GitHub 项目主页。

下面给出一个例子。

完整源码：

在线演示地址：http://demo.baimoz.me/simple/marquee/

注：jquery.min.js、jquery.marquee.min.js、jquery.pause.js 我都下载到本地目录了。实际使用时，请修改为正确的引用路径。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>跑马灯测试</title>
        <style>
            .marquee {
                height: 60px;
                width: 600px;
                overflow: hidden;
                border: 1px solid #ccc;
                background: #ff0;
                text-align: center;
            }
            .ver {
                height: 80px;
                width: 600px;
            }
            .helper {
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }
            p {
                display: inline-block;
                vertical-align: middle;
            }
        </style>
        <script src="jquery.min.js"></script>
        <script src='jquery.marquee.min.js'></script>
        <script src="jquery.pause.js"></script>
        <script type="text/javascript">
            function startMarquee() {
                $('.marquee').marquee({
                    pauseOnHover: true
                });
            }
        </script>
    </head>
    <body onload="startMarquee()">
        Left (default):
        <div class="marquee"><span class="helper"></span><p>红豆生南国，春来发几枝。愿君多采撷，此物最相思。</p></div>
        <br/>
        <div class="marquee" data-duration='10000'><span class="helper"></span><p>红豆生南国，春来发几枝。愿君多采撷，此物最相思。</p></div>
        <br/>
        <div class="marquee" data-duration='2000'><span class="helper"></span><p>红豆生南国，春来发几枝。愿君多采撷，此物最相思。</p></div>
        <br/>

        Right:
        <div class="marquee" data-direction='right'><span class="helper"></span><p>红豆生南国，春来发几枝。愿君多采撷，此物最相思。</p></div>
        <br/>

        Up:
        <div class="marquee ver" data-direction='up' data-duration='1000'>红豆生南国，<br>春来发几枝。<br>愿君多采撷，<br>此物最相思。</div>
        <br/>

        Down:
        <div class="marquee ver" data-direction='down' data-duration='2000'>红豆生南国，<br>春来发几枝。<br>愿君多采撷，<br>此物最相思。</div>
        <br/>
    </body>
</html>