MINECRAFT首页上的数字跳动更新的效果是怎么做到的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 5130 days ago, the information mentioned may be changed or developed.

http://www.minecraft.net/
那个有多少玩家注册以及多少玩家玩过这个游戏的数字在变动的时候，
就是跳动的效果具体是怎么实现的？

玩家

跳动

数字

3 replies • 1970-01-01 08:00:00 +08:00

est

Apr 11, 2012

javascript setInterval

zxwind

Apr 11, 2012

跳动是用animate设置css的位置属性实现的，就是下面这个函数

var countTo = function(el, val) {
if (el.text().length != val.length) {
el.text(val);
el.css('width', el.width() + 'px').css('display', 'inline-block');
return false;
}
var digits = el.text().split('');
el.css('width', el.width() + 'px').css('display', 'inline-block');
el.html("");
var offset = new Array();
var digitEles = new Array();
for (i in digits) {
var digit = $("<span></span>").text(digits[i]).appendTo(el);
offset.push(digit.position().left);
digitEles.push(digit);
}
for (i in digitEles) {
digitEles[i].css({
top: 0,
left: offset[i] + "px",
position: 'absolute'
})
}
var newDigits = val.split('');
for (i in newDigits) {
if (newDigits[i] != digits[i]) {
var newDigit = $('<span></span>').text(newDigits[i]).appendTo(el);
newDigit.css({
top: "-10px",
left: offset[i] + "px",
position: 'absolute'
});
newDigit.animate({
top: '+=10',
opacity: 1.0
}, 200), function() {
el.html(val)
};
digitEles[i].animate({
top: '+=10',
opacity: 0.0
}, 200, function(){
$(this).remove()
});
}
}
//$($('.total_users span')[4]).animate({top: '-=15', opacity: 1.0 },500, function(){$(this).remove()});
}

C0VN

Apr 11, 2012

@est 谢谢，我去查查。

@zxwind 哦，感谢。