jQuery无限滚动新闻插件tickerNews

查看演示立即下载

插件描述：tickerNews 是一个轻量级但有很强大的 jQuery 新闻滚动插件，你可以使用它让一个新闻列表进行无限的滚动。

使用方法

1、HTML

<div class="TickerNews" id="example">
  <div class="ti_wrapper">
    <div class="ti_slide">
      <div class="ti_content">
        <div class="ti_news"><a href="#">11:00 US fisherman rescued by tanker after 66 days lost at sea</a></div>
        <div class="ti_news"><a href="#">12:00 Overseas aid must rise by ￡1bn in next two years, says Europe</a></div>
        <div class="ti_news"><a href="#">13:00 Muslim population looks likely to double in size </a></div>
        <div class="ti_news"><a href="#">15:00 Heathrow cuts passenger levy to boost domestic flights</a></div>
        <div class="ti_news"><a href="#">16:00 Couple plotted to sell their new baby online for ?,000 </a></div>
      </div>
    </div>
  </div>
</div>

2、基本的CSS

.TickerNews {
  width: 100%;
  height: 50px;
  line-height: 50px;
}
 
.ti_wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 50px;
}
 
.ti_slide {
  width: 30000px;
  position: relative;
  left: 0;
  top: 0;
}
 
.ti_content {
  width: 8000px;
  position: relative;
  float: left;
}
 
.ti_news { float: left; }

3、引用jQuery和tickerNews JS

1 2	`<script` `src="/"></script>` `<script` `src="libs/jquery.tickerNews.min.js"></script>`

4、激活news ticker

1	`$("#example").newsTicker();`

5、插件选项

$("#example").newsTicker({
    base: {
        width: 2100,
        time: 40000
    },
    itemWidth: "auto",
    ticker: ".ti_news",
    tickerColne: "ti_clone",
    wrapper: ".ti_wrapper",
    slide: ".ti_slide",
    content: ".ti_content",
    callbacks: {
        beforeLoad: function($Ticker) {},
        onLoad: function($current, $Ticker) {},
        function($old, $current) {},
        completeAnimation: function($old, $current) {}
    },
});

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery实现弹幕实例
下一个特效： jQuery世界地区三级联动