jQuery无限滚动新闻插件tickerNews

所属分类:UI-滚动

 4411  21  查看评论 (2)
jQuery无限滚动新闻插件tickerNews ie兼容8

使用方法

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

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="libs/jquery.tickerNews.min.js"></script>

4、激活news ticker

$("#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) {}
	},
});
相关插件-滚动

jquery无缝滚动

真正的无缝滚动
  滚动
 17315  135

jQuery仿淘宝网右侧悬浮返回顶部和建议代码

jQuery仿淘宝网右侧悬浮返回顶部和建议代码
  滚动
 11756  42

Parallux响应式网页滚动视觉差特效

jQuery Parallux是一款可制作响应式网页滚动视觉差特效的jQuery插件。通过该插件可以制作背景图像,图像,视频,文本等HTML元素的滚动视觉差效果。
  滚动
 11617  71

自制高度可定制滚动条插件(原创)

自制原生JS高度可定制化的滚动条插件,高度自定义,轻量化,浏览器兼容良好
  滚动
 4154  80

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币

    『深爱不及久伴』 0
    2017/5/12 10:03:50

    都没人评价,先来支持下

        彦军0
        2017/7/27 9:31:13
        不支持IE
    回复
取消回复