我很难找到一种方法来将下降的字母插入我的代码。我的任务是要有一个文本字符串,并使所有的偶数字母都从顶部落下,而奇数的字母则从底部飞出并一起形成中间的字符串。

例如,我有:<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();
});


非常感谢高级!

附言如果仅使用CSS3即可完成此任务,我将更喜欢该选项,但不确定是否可行。

最佳答案

// 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();
});


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

现在,一切都随您所愿。核实

10-05 20:56
查看更多