简单的跑马灯式滚动新闻jQuery插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 简单的跑马灯式滚动新闻jQuery插件
简单的跑马灯式滚动新闻jQuery插件
分享:

    插件介绍

    Smart Marquee是一款简单实用的跑马灯式滚动新闻jQuery插件。该插件可以在水平或垂直方向上滚动一个列表中的内容,制作类似跑马灯的效果。并可以设置循环模式,鼠标移动到列表项时会暂停新闻列表的滚动。

    浏览器兼容性

    浏览器兼容性
    时间:07-29
    阅读:
简要教程

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'。