Javascript落字母:每隔一个字母方向不同

Javascript falling letters: Every other letter different direction

本文关键字：一个 方向 Javascript      更新时间：2023-09-26

我很难找到一种方法来插入落字母到我的代码。我的任务是有一个文本字符串，让所有偶数位置的字母从顶部掉下来，奇数位置的字母从底部飞起来，聚集在一起形成中间的字符串。

例如:<span class="uName">John Doe</span>

我希望字母:O, N, D, E从上面掉下来。

同样:jh_ 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();
});

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

现在一切都如你所愿了。检查
相关文章：