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

来源：互联网发布：淘宝网真丝围巾批发编辑：程序博客网时间：2024/05/17 08:44

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

这里写图片描述

它的特点有：

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

使用方法

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

0 0