数值滚动酷炫

Html

Css

.textC {
	position:absolute;
	width:500px;
	overflow:hidden;
	margin-top:100px;
	line-height:30px;
	margin-left:300px;
	height:30px;
}
.textC span {
	color:#13BEEC;
	font-size:28px;
	font-weight:bold;
	font-family:Georgia,"Times New Roman",Times,serif;
	position:absolute;
}

$(function() {
 NumbersAnimate.Target = $(".textC");
 NumbersAnimate.Numbers = 12389623;
 NumbersAnimate.Duration = 1500;
 NumbersAnimate.Animate();
});
var NumbersAnimate = {
 Target: null,
 Numbers: 0,
 Duration: 500,
 Animate: function() {
 var array = NumbersAnimate.Numbers.toString().split("");
 //遍历数组
 for (var i = 0; i < array.length; i++) {
 var currentN = array[i];
 //数字append进容器
 var t = $("");
 $(t).append("" + array[i] + "");
 $(t).css("margin-left", 18 * i + "px");
 $(NumbersAnimate.Target).append(t);
 //生成滚动数字,根据当前数字大小来定
 for (var j = 0; j <= currentN; j++) {
 var tt;
 if (j == currentN) {
 tt = $("" + j + "");
 } else {
 tt = $("" + j + "");
 }
 $(t).append(tt);
 $(tt).css("margin-top", (j + 1) * 25 + "px");
 }
 $(t).animate({
 marginTop: -((parseInt(currentN) + 1) * 25) + "px"
 }, NumbersAnimate.Duration, function() {
 $(this).find(".childNumber").remove();
 });
 }
 },
 ChangeNumber: function(numbers) {
 var oldArray = NumbersAnimate.Numbers.toString().split("");
 var newArray = numbers.toString().split("");
 for (var i = 0; i < oldArray.length; i++) {
 var o = oldArray[i];
 var n = newArray[i];
 if (o != n) {
 var c = $($(".main")[i]);
 var num = parseInt($(c).html());
 var top = parseInt($($(c).find("span")[0]).css("marginTop").replace('px', ''));

for (var j = 0; j <= n; j++) {
 var nn = $("" + j + "");
 if (j == n) {
 nn = $("" + j + "");
 } else {
 nn = $("" + j + "");
 }
 $(c).append(nn);
 $(nn).css("margin-top", (j + 1) * 25 + top + "px");
 }
 var margintop = parseInt($(c).css("marginTop").replace('px', ''));
 $(c).animate({
 marginTop: -((parseInt(n) + 1) * 25) + margintop + "px"
 }, NumbersAnimate.Duration, function() {
 $($(this).find("span")[0]).remove();
 $(".yy").remove();
 });
 }
 }
 NumbersAnimate.Numbers = numbers;
 },

RandomNum: function(m, a) {
        var Range = a - m;
        var Rand = Math.random();
        return (m + Math.round(Rand * Range));
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

数值滚动酷炫



代码描述：jQuery数值滚动的效果

3

最新

发表评论全部评论

暂时没有评论！

金章水0

2017/7/25 21:08:06

真的么回复

再萌我就亲你咯1

2017/6/12 14:17:35

多点几次就剩下第一个数字1了
回复

????????0

2017/6/12 12:38:19

you bug
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

孤独de路灯

相关代码

数值滚动酷炫

最新