关闭

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

808人阅读 评论(0) 收藏 举报

这是一款非常实用的基于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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4720次
    • 积分:72
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:8篇
    • 译文:0篇
    • 评论:1条
    文章分类
    最新评论