注册 登录 充值会员 退出
网站、APP、小程序等定制开发,联系QQ 1206995177 毕业设计 java源码 PHP源码
充值

jQuery数字滚动增加动画特效

作者/代码整理:  (源码已亲测,不会安装的可以向QQ1915635791要安装视频教程) 发布日期:2023-05-13
jQuery数字滚动增加动画特效
jQuery数字滚动增加动画特效是一款样式经过美化的数字上下滚动累加动画效果。


js代码

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/digitalScroll.js"></script>
<script type="text/javascript">
var sum = 13000;
$(function() {
	setInterval(function(){
		show_num1(sum)
	},1000);
});

function show_num1(n) {
	sum=sum+5;
	console.log(n);
	var it = $(".t_num1 i");
	var len = String(n).length;
	for(var i = 0; i < len; i++) {
		if(it.length <= i) {
			$(".t_num1").append("<i></i>");
		}
		var num = String(n).charAt(i);
		//根据数字图片的高度设置相应的值
		var y = -parseInt(num) * 58;
		var obj = $(".t_num1 i").eq(i);
		obj.animate({
			backgroundPosition: '(0 ' + String(y) + 'px)'
		}, 'slow', 'swing', function() {});
	}
	$("#cur_num").val(n);
}
</script>