素材网 素材网

jQuery新闻列表无缝循环滚动切换展示效果

下载资源()次

阅读次数()次

发布时间:2015-06-13

jQuery新闻列表无缝循环滚动切换展示效果
分享到:

用法简介:

来源:xw素材网

jQuery新闻列表无缝循环滚动切换展示效果 。
文件引用:

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="assets/js/chart.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/prism.js"></script>
<script src="assets/js/jquery.mCustomScrollbar.min.js"></script>
<script src="jquery.newsTicker.js"></script>
<script>
	$('a[href*=#]').click(function(e) {
		var href = $.attr(this, 'href');
		if (href != "#") {
			$('html, body').animate({
				scrollTop: $(href).offset().top - 81
			}, 500);
		}
		else {
			$('html, body').animate({
				scrollTop: 0
			}, 500);
		}
		return false;
	});
	$(window).load(function(){
		$('code.language-javascript').mCustomScrollbar();
	});
	var nt_title = $('#nt-title').newsTicker({
		row_height: 40,
		max_rows: 1,
		duration: 3000,
		pauseOnHover: 0
	});
	var nt_example1 = $('#nt-example1').newsTicker({
		row_height: 80,
		max_rows: 3,
		duration: 4000,
		prevButton: $('#nt-example1-prev'),
		nextButton: $('#nt-example1-next')
	});
	var nt_example2 = $('#nt-example2').newsTicker({
		row_height: 60,
		max_rows: 1,
		speed: 300,
		duration: 6000,
		prevButton: $('#nt-example2-prev'),
		nextButton: $('#nt-example2-next'),
		hasMoved: function() {
			$('#nt-example2-infos-container').fadeOut(200, function(){
				$('#nt-example2-infos .infos-hour').text($('#nt-example2 li:first span').text());
				$('#nt-example2-infos .infos-text').text($('#nt-example2 li:first').data('infos'));
				$(this).fadeIn(400);
			});
		},
		pause: function() {
			$('#nt-example2 li i').removeClass('fa-play').addClass('fa-pause');
		},
		unpause: function() {
			$('#nt-example2 li i').removeClass('fa-pause').addClass('fa-play');
		}
	});
	$('#nt-example2-infos').hover(function() {
		nt_example2.newsTicker('pause');
	}, function() {
		nt_example2.newsTicker('unpause');
	});
	var state = 'stopped';
	var speed;
	var add;
	var nt_example3 = $('#nt-example3').newsTicker({
		row_height: 80,
		max_rows: 1,
		duration: 0,
		speed: 10,
		autostart: 0,
		pauseOnHover: 0,
		hasMoved: function() {
			if (speed > 700) {
				$('#nt-example3').newsTicker("stop");
				console.log('stop')
				$('#nt-example3-button').text("RESULT: " + $('#nt-example3 li:first').text().toUpperCase());
				setTimeout(function() {
					$('#nt-example3-button').text("START");
					state = 'stopped';
				},2500);
			}
			else if (state == 'stopping') {
				add = add * 1.4;
				speed = speed + add;
				console.log(speed)
				$('#nt-example3').newsTicker('updateOption', "duration", speed + 25);
				$('#nt-example3').newsTicker('updateOption', "speed", speed);
			}
		}
	});
	$('#nt-example3-button').click(function(){
		if (state == 'stopped') {
			state = 'turning';
			speed = 1;
			add = 1;
			$('#nt-example3').newsTicker('updateOption', "duration", 0);
			$('#nt-example3').newsTicker('updateOption', "speed", speed);
			nt_example3.newsTicker('start');
			$(this).text("STOP");
		}
		else if (state == 'turning') {
			state = 'stopping';
			$(this).text("WAITING...");
		}
	});
</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。