jQuery基于bootstrap的响应式滚动新闻插件

这是一款非常实用的基于bootstrap 3的响应式jQuery滚动新闻插件。该bootstrap滚动新闻插件可以制作为自动向上或向下滚动的模式,可以带图片显示,界面设计时尚自然,非常适合于网站制作实时滚动新闻列表。

它的特点有:

  • 响应式设计

  • 轻量级

  • 使用简单

  • 可以向上或向下滚动新闻列表

使用方法

HTML结构

该滚动新闻插件的HTML结构使用标准的bootstrap结构来布局,新闻列表使用无序列表来制作。

<div class="col-md-4">
  <div class="panel panel-default">
    <div class="panel-heading">
      <span class="glyphicon glyphicon-list-alt"></span><b>News</b></div>
    <div class="panel-body">
      <div class="row">
        <div class="col-xs-12">
          <ul class="demo1">
            <li class="news-item">
              <table cellpadding="4">
                <tr>
                  <td><img src="images/1.png" width="60" class="img-circle" /></td>
                  <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
                </tr>
              </table>
            </li>
            ....
          </ul>
        </div>
      </div>
    </div>
    <div class="panel-footer">

    </div>
  </div>
</div>

初始化插件

在页面加载完毕之后,可以使用下面的方法来初始化该滚动新闻插件。

$(".demo1").bootstrapNews({
    newsPerPage: 5,
    autoplay: true,
    pauseOnHover:true,
    direction: 'up',
    newsTickerInterval: 4000,
    onToDo: function () {
        //console.log(this);
    }
});

配置参数

下面是该滚动新闻插件所有可用的参数选项和它的默认值。

$.fn.bootstrapNews.options = {
    newsPerPage: 4, 
    navigation: true,
    autoplay: true,
    direction:'up',
    animationSpeed: 'normal',
    newsTickerInterval: 4000, //4 secs
    pauseOnHover: true,
    onStop: null,
    onPause: null,
    onReset: null,
    onPrev: null,
    onNext: null,
    onToDo: null
};
  • newsPerPage:每页显示的新闻条数。

  • navigation:是否为导航模式。

  • autoplay:是否自动滚动新闻。

  • direction:新闻的滚动方向。

  • animationSpeed:自动滚动新闻的速度。

  • newsTickerInterval:每隔几秒钟切换到下一条新闻。

  • pauseOnHover:是否在鼠标滑过是暂停新闻滚动。

  • onStop:新闻滚动停止时的回调函数。

  • onPause:新闻滚动暂停时的回调函数。

  • onReset:新闻滚动被重置时的回调函数。

  • onPrev:滚动到前一条新闻时的回调函数。

  • onNext:滚动到下一条新闻时的回调函数。

  • onToDo:回调函数。



赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏