V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
xavierskip
V2EX  ›  JavaScript

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

  •  
  •   xavierskip · 2012-04-11 13:54:14 +08:00 · 4084 次点击
    这是一个创建于 4620 天前的主题,其中的信息可能已经有所发展或是发生改变。
    http://www.minecraft.net/
    那个有多少玩家注册以及多少玩家玩过这个游戏的数字在变动的时候,
    就是跳动的效果具体是怎么实现的?
    3 条回复    1970-01-01 08:00:00 +08:00
    est
        1
    est  
       2012-04-11 17:00:47 +08:00
    javascript setInterval
    zxwind
        2
    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
        3
    xavierskip  
    OP
       2012-04-11 19:01:12 +08:00
    @est 谢谢,我去查查。

    @zxwind 哦,感谢。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3568 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 04:37 · PVG 12:37 · LAX 20:37 · JFK 23:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.