素材网 素材网

jQuery下拉滚动页面底部数字自动增加动画效果

下载资源()次

阅读次数()次

发布时间:2017-01-05

jQuery下拉滚动页面底部数字自动增加动画效果
分享到:

用法简介:

来源:xw素材网

jQuery下拉滚动页面底部数字自动增加动画效果。
文件引用:

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//窗口显示才加载
var wrapTop = $(".digital").offset().top;
var istrue = true;
$(window).on("scroll",
function() {
	var s = $(window).scrollTop();
	if (s > wrapTop - 500 && istrue) {
		$(".timer").each(count);
		function count(a) {
			var b = $(this);
			a = $.extend({},
			a || {},
			b.data("countToOptions") || {});
			b.countTo(a)
		};
		istrue = false;
	};
})
//设置计数
$.fn.countTo = function (options) {
	options = options || {};
	return $(this).each(function () {
		//当前元素的选项
		var settings = $.extend({}, $.fn.countTo.defaults, {
			from:            $(this).data('from'),
			to:              $(this).data('to'),
			speed:           $(this).data('speed'),
			refreshInterval: $(this).data('refresh-interval'),
			decimals:        $(this).data('decimals')
		}, options);
		//更新值
		var loops = Math.ceil(settings.speed / settings.refreshInterval),
			increment = (settings.to - settings.from) / loops;
		//更改应用和变量
		var self = this,
		$self = $(this),
		loopCount = 0,
		value = settings.from,
		data = $self.data('countTo') || {};
		$self.data('countTo', data);
		//如果有间断,找到并清除
		if (data.interval) {
			clearInterval(data.interval);
		};
		data.interval = setInterval(updateTimer, settings.refreshInterval);
		//初始化起始值
		render(value);
		function updateTimer() {
			value += increment;
			loopCount++;
			render(value);
			if (typeof(settings.onUpdate) == 'function') {
				settings.onUpdate.call(self, value);
			}
			if (loopCount >= loops) {
				//移出间隔
				$self.removeData('countTo');
				clearInterval(data.interval);
				value = settings.to;
				if (typeof(settings.onComplete) == 'function') {
					settings.onComplete.call(self, value);
				}
			}
		}
		function render(value) {
			var formattedValue = settings.formatter.call(self, value, settings);
			$self.html(formattedValue);
		}
		});
	};
	$.fn.countTo.defaults={
		from:0,               //数字开始的值
		to:0,                 //数字结束的值
		speed:1000,           //设置步长的时间
		refreshInterval:100,  //隔间值
		decimals:0,           //显示小位数
		formatter: formatter, //渲染之前格式化
		onUpdate:null,        //每次更新前的回调方法
		onComplete:null       //完成更新的回调方法
	};
	function formatter(value, settings){
		return value.toFixed(settings.decimals);
	}
	//自定义格式
	$('#count-number').data('countToOptions',{
		formmatter:function(value, options){
			return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
		}
	});
	//定时器
	$('.timer').each(count);
	function count(options){
		var $this=$(this);
		options=$.extend({}, options||{}, $this.data('countToOptions')||{});
		$this.countTo(options);
	}
</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

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

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

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

邮箱订阅

什么是邮箱订阅?

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