jQuery 滚动页数字递加特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

29 112 38



特效描述:滚动页 数字递加。jQuery动态文字效果窗口显示才加载

代码结构

1. 引入JS

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

2. HTML代码

<div class="h_top">
	<h3>向下滚动页面查看效果</h3>
</div>
<div class="digital">
<div class="main">
	<ul class="mumping_mun">
	<li>
	  <div class="mun_top">
	  <h2 class="timer count-title" id="count-number" data-to="300" data-speed="1500"></h2>
	  <img src="images/home_27.png">
	  </div>  
	  <p>PROJECT DONE</p>  
	</li>
	<li><div class="mun_top">
	  <i class="fa-icon"><img src="images/home_29.png"></i>
	  <h2 class="timer count-title" id="count-number" data-to="1787" data-speed="1500"></h2> 
	  </div> 
	  <p>COUNTRIES</p>
	</li>
	<li><div class="mun_top">
	  <i class="fa-icon"><img src="images/home_31.png"></i>
	  <h2 class="timer count-title" id="count-number" data-to="847" data-speed="1500"></h2>
	  </div> 
	  <p>TOTAL CLIENT</p>
	</li>
	<li><div class="mun_top">
	  <i class="fa-icon"><img src="images/home_33.png"></i>
	  <h2 class="timer count-title" id="count-number" data-to="157" data-speed="1500"></h2>
	  </div> 
	  <p>AWARDS GOT</p>
	</li>
	<li><div class="mun_top">
	  <i class="fa-icon"><img src="images/home_36.png"></i>
	  <h2 class="timer count-title" id="count-number" data-to="851" data-speed="1500"></h2>
	  </div> 
	  <p>CUP OF COFFEE</p>
	</li>
	</ul>
</div>
</div>
</div>
	<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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到