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

Question

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

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

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

码：

我正在使用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; 跨度元素position: absolute; 。 然后，span元素的绝对位置相对于div容器。 因此，您可以更改相对于容器的位置。 稍加调整，它就可以完成您想要实现的目标。