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

V2EX = way to explore

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

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 4601 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

玩家

跳动

数字

3 条回复 • 1970-01-01 08:00:00 +08:00

est

2012-04-11 17:00:47 +08:00

javascript setInterval

zxwind

2012-04-11 17:50:43 +08:00

跳动是用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()});
}

xavierskip

2012-04-11 19:01:12 +08:00

@est 谢谢，我去查查。

@zxwind 哦，感谢。