使用 jQuery-Marquee 实现跑马灯（滚动消息）效果
- 前端笔记
- 2017-03-24
- 9热度
- 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>
