关闭

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

1587人阅读 评论(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
查看评论

40 个超棒的免费 Bootstrap HTML5 网站模板

40 个超棒的免费 Bootstrap HTML5 网站模板 收藏下 http://www.oschina.net/news/59924/free-bootstrap-templates
  • zeng_84_long
  • zeng_84_long
  • 2015-06-13 11:02
  • 2225

基于bootsrap的一个新闻滚动插件

下载插件看这里:http://www.htmleaf.com/jQuery/Layout-Interface/201505011764.html              ...
  • qq_33769914
  • qq_33769914
  • 2016-08-03 11:48
  • 687

Bootstrap 滚动条

一:增加滚动条 其实只要在 相关模块的  class属性中,再加上  pre-scrollable 即可。 例如是在中添加pre-scrollable: 二:设置overflow (1)div style=" overflow:scroll; width:...
  • zsg88
  • zsg88
  • 2017-04-15 22:58
  • 9938

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法 系统默认的滚动条样式,真的已经看的够恶心了。试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭。 为了自己定义网页中的滚动条的方法,我真的已...
  • cdnight
  • cdnight
  • 2014-11-21 17:04
  • 37033

最牛x的滚动插件 – jquery的iscroll插件(附上下拉刷新消息demo)

iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件。 它可以在桌面,移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。 iScroll不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含...
  • orichisonic
  • orichisonic
  • 2016-04-22 14:54
  • 6443

一个好用的bootstrap的滑动插件

collapse.js 在bootstrap上面直接下载源码发现用的不是很顺畅,图片在滑动的时候会先高,然后再变矮。 换了这种用了以后很顺畅了,内含广告。                   ...
  • u010289111
  • u010289111
  • 2016-06-10 08:42
  • 4127

bootstrap列表添加滚动条

有时候列表中数据过多,导致超出页面,影响视觉感受。这时我们需要添加一个滚动条。 初始状态如图: 代码如下: 免费域名注册 免费 Window 空间托管 图像的数量 24*7 支持 每年...
  • u012130706
  • u012130706
  • 2017-05-20 23:00
  • 5214

js新闻滚动公告

*{         list-style: none;         margin: 0;         p...
  • fly825574456
  • fly825574456
  • 2016-10-12 19:37
  • 1282

利用JQuery一步步打造无缝滚动新闻

首先,我们这里有这么一段html代码,很简洁,如下所示: 1 div id="tag"> 2 ul> 3 li>你说我是好人吗,我是好人啊li> 4 li>哈哈,我真的不知道说什么了l...
  • quryktcs
  • quryktcs
  • 2017-05-10 15:54
  • 200

Jquery滚动新闻

    网上下载了一个Jquery新闻滚动Demo,效果不错。我根据自己情况,做了些调整。    下载后,除了Html及Jquery.js,还有三个文件,分别是Css,主Js和一个定位Js(jquery.dimensions.js),Css...
  • leeeeleeee
  • leeeeleeee
  • 2008-03-08 13:54
  • 5671
    个人资料
    • 访问:8314次
    • 积分:109
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:8篇
    • 译文:0篇
    • 评论:1条
    文章分类
    最新评论