基于bootstrap的响应式jQuery滚动新闻插件 _bootstrapNew
2016-08-31 16:22
686 查看
这是一款非常实用的基于bootstrap 3的响应式jQuery滚动新闻插件。该bootstrap滚动新闻插件可以制作为自动向上或向下滚动的模式,可以带图片显示,界面设计时尚自然,非常适合于网站制作实时滚动新闻列表。
它的特点有:
响应式设计
轻量级
使用简单
可以向上或向下滚动新闻列表
该滚动新闻插件的HTML结构使用标准的bootstrap结构来布局,新闻列表使用无序列表来制作。
newsPerPage:每页显示的新闻条数。
navigation:是否为导航模式。
autoplay:是否自动滚动新闻。
direction:新闻的滚动方向。
animationSpeed:自动滚动新闻的速度。
newsTickerInterval:每隔几秒钟切换到下一条新闻。
pauseOnHover:是否在鼠标滑过是暂停新闻滚动。
onStop:新闻滚动停止时的回调函数。
onPause:新闻滚动暂停时的回调函数。
onReset:新闻滚动被重置时的回调函数。
onPrev:滚动到前一条新闻时的回调函数。
onNext:滚动到下一条新闻时的回调函数。
onToDo:回调函数。
Demo及源码,更多内容
http://www.htmleaf.com/jQuery/Layout-Interface/201505011764.html
它的特点有:
响应式设计
轻量级
使用简单
可以向上或向下滚动新闻列表
使用方法
HTML结构该滚动新闻插件的HTML结构使用标准的bootstrap结构来布局,新闻列表使用无序列表来制作。
<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-md-4"</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"panel panel-default"</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"panel-heading"</span>></span> <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-list-alt"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"><<span class="hljs-title">b</span>></span>News<span class="hljs-tag"></<span class="hljs-title">b</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"panel-body"</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row"</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-xs-12"</span>></span> <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"demo1"</span>></span> <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"news-item"</span>></span> <span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">cellpadding</span>=<span class="hljs-value">"4"</span>></span> <span class="hljs-tag"><<span class="hljs-title">tr</span>></span> <span class="hljs-tag"><<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"images/1.png"</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"60"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"img-circle"</span> /></span><span class="hljs-tag"></<span class="hljs-title">td</span>></span> <span class="hljs-tag"><<span class="hljs-title">td</span>></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>Read more...<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">td</span>></span> <span class="hljs-tag"></<span class="hljs-title">tr</span>></span> <span class="hljs-tag"></<span class="hljs-title">table</span>></span> <span class="hljs-tag"></<span class="hljs-title">li</span>></span> .... <span class="hljs-tag"></<span class="hljs-title">ul</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"panel-footer"</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> </code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li></ul>
初始化插件
在页面加载完毕之后,可以使用下面的方法来初始化该滚动新闻插件。<code class="hljs javascript has-numbering">$(<span class="hljs-string">".demo1"</span>).bootstrapNews({ newsPerPage: <span class="hljs-number">5</span>, autoplay: <span class="hljs-literal">true</span>, pauseOnHover:<span class="hljs-literal">true</span>, direction: <span class="hljs-string">'up'</span>, newsTickerInterval: <span class="hljs-number">4000</span>, onToDo: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span> <span class="hljs-comment">//console.log(this);</span> } }); </code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul>
配置参数
下面是该滚动新闻插件所有可用的参数选项和它的默认值。<code class="hljs javascript has-numbering">$.fn.bootstrapNews.options = { newsPerPage: <span class="hljs-number">4</span>, navigation: <span class="hljs-literal">true</span>, autoplay: <span class="hljs-literal">true</span>, direction:<span class="hljs-string">'up'</span>, animationSpeed: <span class="hljs-string">'normal'</span>, newsTickerInterval: <span class="hljs-number">4000</span>, <span class="hljs-comment">//4 secs</span> pauseOnHover: <span class="hljs-literal">true</span>, onStop: <span class="hljs-literal">null</span>, onPause: <span class="hljs-literal">null</span>, onReset: <span class="hljs-literal">null</span>, onPrev: <span class="hljs-literal">null</span>, onNext: <span class="hljs-literal">null</span>, onToDo: <span class="hljs-literal">null</span> }; </code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li></ul>
newsPerPage:每页显示的新闻条数。
navigation:是否为导航模式。
autoplay:是否自动滚动新闻。
direction:新闻的滚动方向。
animationSpeed:自动滚动新闻的速度。
newsTickerInterval:每隔几秒钟切换到下一条新闻。
pauseOnHover:是否在鼠标滑过是暂停新闻滚动。
onStop:新闻滚动停止时的回调函数。
onPause:新闻滚动暂停时的回调函数。
onReset:新闻滚动被重置时的回调函数。
onPrev:滚动到前一条新闻时的回调函数。
onNext:滚动到下一条新闻时的回调函数。
onToDo:回调函数。
Demo及源码,更多内容
http://www.htmleaf.com/jQuery/Layout-Interface/201505011764.html
相关文章推荐
- 基于jquery的滚动新闻列表
- jQuery新闻滚动插件 jquery.roller.js
- 同一页面多次调用的基于Jquery的文字滚动跑马灯插件
- 基于jquery的bootstrap在线文本编辑器插件Summernote
- 基于编写jQuery的无缝滚动插件
- 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
- 第32款插件:第26款插件:jcarousellite.js 基于Jquery的无缝“垂直滚动”图片插件
- jcarousellite.js 基于Jquery的图片无缝滚动插件
- [jQuery插件] Sly:灵活的基于ITEM的滚动插件
- 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
- 基于jquery的无缝循环新闻列表插件
- 基于jquery的滚动新闻列表
- 超级有用的13个基于jQuery的内容滚动插件和教程
- 基于编写jQuery的无缝滚动插件
- 基于jquery的图片滚动插件代码
- 重新发明轮子之jQuery新闻滚动插件
- 基于jQuery的图片左右无缝滚动插件
- 基于jQuery图片平滑连续滚动插件(转)
- 基于jQuery图片平滑连续滚动插件
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)