Question

当我将鼠标悬停在主要字母上时，我试图在主要字母下方附加重复的字母...

然后动态/逐渐向下移动字母，直到它们到达浏览器的底部。

我的问题是，当我将鼠标悬停在左边的下一个字母上时，所有附加字母（跨度）的位置只会更新为一组。我想要的是在右边：

enter image description here

代码：

我使用jsLettering（$(".title").lettering();）将<h1 class="title">2014</h1>中的每个字母拆分为单独的跨度

所以2014年将是

<span class="char1">2</span>
<span class="char2">0</span>
<span class="char3">1</span>
<span class="char4">4</span>

然后在每个跨度的悬停中，我尝试创建并将该字母的副本附加到$('.fallingLetters')，然后将字母向下移动到底部。

HTML片段：

        <div class="row">
            <div class="col-md-12"><h1 class="title">2014</h1></div>
            <div class="fallingLetters"></div>
        </div>

JavaScript代码段

        $("h1 span").mouseenter(function () {       
            var 
                letter = $(this).text(),
                val = $(this);

            $('.fallingLetters').append("<span>" + letter + "</span>");

            $('.fallingLetters span').css({"position" : "absolute"});
            $('.fallingLetters span')css({"left" : val.position().left+100});                                                           
            $('.fallingLetters span').css({"top" : val.position().top+150});        
        });

         setInterval(function(){ 
            moveSpans();
         }, 100);
    });

    function moveSpans() {
        $(".fallingLetters span").each(function (index, val) {  
            if ($(".fallingLetters span").length > 30) {        
                $(".fallingLetters").empty();
            }
            $(val).css("top","+=5");                                    
        });
    }

Answer 1

很难说你真正希望达到什么样的效果所以我猜了一下。在HTML发布之前我做了小提琴，但它应该很容易适应你的课程。

请告诉我这是否是您要找的内容： jsFiddle

的JavaScript

$(function () {
    $("h1 span").mouseenter(function () {
        var letter = $(this).clone(),
            parent = $(this).parent();
        parent.append(letter);

        letter.css({
            "position": "absolute",
            "left": $(this).position().left,
            "top": parent.height()
        });
        letter.animate({"top": $(window).outerHeight()}, 5000, "linear", function() {
            $(this).remove();
        });
    });    
});

HTML

<h1>
    <span>2</span><span>0</span><span>1</span><span>4</span>
</h1>

CSS

body {
    margin: 0;
    font-family: sans-serif;
    font-size: 32px;
}
h1 {
    margin: 0;
}
h1 > span {
    position: relative;
}

Answer 2

当你将下降字母的位置设置为'绝对'时，字母不再占用页面上的空格，因此所有字母的val.position（）。left将是相同的 - 这就是为什么它们'重叠在一起。您有两种选择： 1.手动和单独设置字母的位置，这样您就可以正确地将它们分开。 2.将包含字母的四个跨度包装在一个“div”元素中，然后设置包含所有四个字母的div的位置。

Answer 3

您必须在HTML中执行类似的操作：

<div class="lineOne">
    <span>2</span>
    <span>2</span>
</div>
<div class="lineTwo">
    <span>0</span>
    <span>0</span>
</div>
<div class="lineThree">
    <span>1</span>
    <span>1</span>
</div>
<div class="lineFour">
    <span>4</span>
    <span>4</span>
</div>

然后只需.lineOne作为position: relative;和span元素position: absolute;。然后，span元素的绝对位置相对于div容器。因此，您可以更改相对于容器的位置。只需稍加调整就可以实现您想要实现的目标。

相对于另一个元素定位元素

3 个答案: