Smart Marquee是一款简单实用的跑马灯式滚动新闻jQuery插件。该插件可以在水平或垂直方向上滚动一个列表中的内容,制作类似跑马灯的效果。并可以设置循环模式,鼠标移动到列表项时会暂停新闻列表的滚动。
这个插件适用于制作滚动新闻,滚动文字,滚动图片等效果。
使用方法
使用该滚动新闻插件需要引入jQuery和jquery.smartmarquee.js文件。
<script src="js/jquery.min.js"></script> <script src="jquery.smartmarquee.js"></script>
HTML结构
该滚动新闻的HTML结构使用一个<div>
作为包裹元素,里面放置一个无序列表。
<div class="smartmarquee example"> <ul class="container"> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> <li> Item 4 </li> <li> Item 5 </li> <li> Item 6 </li> </ul> </div>
CSS样式
需要为该滚动新闻添加一些必要的CSS样式。
.smartmarquee { position: relative; overflow: hidden; } .smartmarquee .container { position: absolute; }
初始化插件
在页面DOM元素加载完毕之后,可以通过smartmarquee()
方法来初始化该滚动新闻插件。
$(document).ready(function () { $(".example").smartmarquee(); });
配置参数
下面是该滚动新闻插件的可用配置参数。
-
duration
:滚动动画的持续时间,单位毫秒,默认值为1000。 -
loop
:是否循环显示,默认值为true
。 -
interval
:滚动的间隔时间,单位毫秒,默认值2000。 -
axis
:滚动的方向,可选值有:'vertical' 或 'horizontal'。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!