内容布局 基于bootstrap的响应式jQuery滚动新闻插件(1/2)

本篇文章主要介绍了" 内容布局 基于bootstrap的响应式jQuery滚动新闻插件"，主要涉及到方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 这是一款非常实用的基于bootstrap 3的响应式jQuery滚动新闻插件。该bootstrap滚动新闻插件可以制作为自动向上或向下滚动的模式，可以带图片显示...

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

它的特点有：

• 响应式设计
• 轻量级
• 使用简单
• 可以向上或向下滚动新闻列表

使用方法

HTML结构

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

<divclass="col-md-4"><divclass="panel panel-default"><divclass="panel-heading"><spanclass="glyphicon glyphicon-list-alt">span><b>Newsb>div><divclass="panel-body"><divclass="row"><divclass="col-xs-12"><ulclass="demo1"><liclass="news-item"><tablecellpadding="4"><tr><td><imgsrc="images/1.png"width="60"class="img-circle" />td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <ahref="#">Read more...a>td>tr>table>li>
            ....
          ul>div>div>div><divclass="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：回调函数。

Demo及源码，更多内容