Question

我很难找到在代码中插入掉落字母的方法。我的任务是有一个文本字符串，让所有偶数字母从顶部掉落，奇数字母从底部飞出，然后组合在一起形成中心的字符串。

例如，我有：<span class="uName">John Doe</span>

我希望这些字母：O，N，D，E从顶部掉下来。

同样地：J H _ O从底部飞起来。（保持各自的横向位置）。

这是我到目前为止所拥有的，但是我对JavaScript / JQuery缺乏经验，而且我无法让它运行。

vertical = new Array(80);
var textPos = 0;
for(var i = 0; i < 80; ++i) {
    vertical[i] = textPos;
    textPos += 5;
}

function poz(){
    document.getElementsByClassName("tops").style.top = '0px';
    document.getElementsByClassName("bottoms").style.bottom = '0px';
    animate();
}
function animate(){
    for(var j = 0; j < 80; ++j) {
        document.getElementsByClassName("tops").style.top = vertical[j] + "px";
        document.getElementsByClassName("bottoms").style.bottom = vertical[j] + "px";
    }

}

$('.uName').each(function(){
    var letters = $(this).text().split('');
    $(this).text('');
    for(var i = 0; i < letters.length; i++){
        if(i % 2 == 0){
            $(this).append('<span class="tops">' + letters[i] + '</span>');
        }
        else{
            $(this).append('<span class="bottoms">' + letters[i] + '</span>');
        }
    }
    poz();
});

非常感谢先进！

P.S。如果只使用CSS3可以实现此任务，我会更喜欢这个选项，但我不确定它是否可行。

Answer 1

// CSS

.bottoms{
    margin-top:200px!important;
}

//脚本

  vertical = new Array(80);
var textPos = 0;
for(var i = 0; i < 80; ++i) {
    vertical[i] = textPos;
    textPos += 5;
}

function poz(){

   // $(".tops").css('top','0px');
   // $(".bottoms").css('bottom','0px');
    //document.getElementsByClasjqsName("bottoms").style.bottom = '0px';
    animate();
}
function animate(){

    for(var j = 0; j < 80; ++j) {
     //alert(vertical[j]);
    //$(".tops").css('top',vertical[j]+'px');
    //$(".bottoms").css('bottom',vertical[j]+'0');

        if(vertical[j]<101){
   $(".tops").animate({top:vertical[j]+'px'},500);
   $(".bottoms").animate({bottom:vertical[j]+'px'},500);  



    $(".tops").css('position','relative');
    $(".bottoms").css('position','relative');
    $(".tops").css('float','left');
    $(".bottoms").css('float','left');

        }

 //       document.getElementsByClassName("tops").style.top = vertical[j] + "px";
   //     document.getElementsByClassName("bottoms").style.bottom = vertical[j] + "px";
    }

}

$('.uName').each(function(){
    var letters = $(this).text().split('');
    $(this).text('');
    for(var i = 0; i < letters.length; i++){
        if(i % 2 == 0){
            $(this).append('<span class="tops">' + letters[i] + '</span>');
        }
        else{
            $(this).append('<span class="bottoms">' + letters[i] + '</span>');
        }
    }
    poz();
});

//新小提琴链接http://jsfiddle.net/PP44C/7/

现在一切都很好，你想要的。检查

Javascript下降字母：每隔一个字母不同的方向

1 个答案: