2017年3月24日

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

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>

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

错误:您的PHP不支持GD图像!

联系您的主机商,询问PHP支持GD图像的问题.

错误:您的PHP不支持imagepng函数!

联系您的主机商,询问PHP支持imagepng函数的问题.