一旦到达屏幕一侧，如何反转移动div的方向？

Question

我有一个绝对定位的 div，它使用 jQuery .animate 函数从屏幕的右到左水平移动。 我的问题是，一旦 div 到达最左侧，它就会继续并最终从屏幕上消失。你是如何做到的，一旦 div 到达左侧，它就会反转并开始向右移动？ （反之亦然，这样右侧就不会继续向右，而是在到达终点后再次向左）

HTML：

<div class="container">
    <div class="block"></div>
</div>

CSS：

.block {
    float:right;
    position:absolute;
    right:100px;
    width:100px;
    height:100px;
    background:red;
}

jQuery:

$('.block').click(function() {
    $(this).animate(
        {"right": "+=100px"},"slow");
});

这是我的 JSFiddle：https://jsfiddle.net/ebkc9dzL/

非常感谢您的帮助！

Answer 1

也许你应该这样尝试：

$('.block').click(function() {
    var leftPosition = $(this).position();
    if (leftPosition.left > 100) {
        $(this).animate({"right": "+=100px"},"slow");
    } else {
        $(this).animate({"right": "-=100px"},"slow");
    }
});

当元素靠近边框时，if..else 部分代码将反转方向。

这是一个小提琴，尝试单击红色框以了解其工作原理： https://jsfiddle.net/dimitrioglo/ebkc9dzL/14/

Answer 2

工作小提琴：https://jsfiddle.net/ebkc9dzL/19/

您需要在 click 函数之外有一个变量来告诉您动画的方向，这样一旦进入 click 函数，您就可以使用 getBoundingClientRect() (mdn reference) 计算动画对象的位置。

然后，如果对象向左移动并且其left 距离小于其自身的宽度，则您只需将其移动到足以使其到达边缘即可。如果在边缘（left 为零），则需要改变方向。

如果它向右移动并且它的right 距离小于它自己的宽度，您只需将它移动到足够的距离（由window.innerWidth - 100 计算，因为100 是您的对象的宽度）以便它到达边缘。如果它在右边缘，则需要改变方向。

改变传递给 jQuery 的 animate 函数的对象的方向是一个简单的添加或减去其“正确”属性的问题。

var direction = "+";
$('.block').click(function() {
    var obj = {},
        distance = 100,
        rect = this.getBoundingClientRect();

    if(direction=="+"){
        if(rect.left>0 && rect.left < 100)
            distance = rect.left;
        else if(rect.left<=0)
            direction = "-";
    }
    else {
        if(rect.right >(window.innerWidth-100) && rect.right+1<window.innerWidth)
            distance = (window.innerWidth-rect.right);
        else if(rect.right+1 >=window.innerWidth){
            direction = "+";
        }
    }

    obj = {"right": direction+"="+distance.toString()+"px"}
    $(this).animate(obj,"slow");
});

Answer 3

给你：jsFiddle。

新的javascript如下：

var goLeft = true;  
$('.block').click(function() {
    var animateDist = 100;

    var distLeft = $(this).position().left;
    var distRight = window.innerWidth - distLeft;

    if (goLeft) {
        if (distLeft < 100) {
            animateDist = "+="+distLeft+"px";
            $(this).animate(
                {"right": animateDist},"slow"
            );
            goLeft = false;
        } else {
            $(this).animate(
                {"right": "+=100px"},"slow"
            );
        }
    } else {
        if (distRight < 100) {
            animateDist = "-="+distRight+"px";
            $(this).animate(
                {"right": animateDist},"slow"
            );
            goLeft = true;
        } else {
            $(this).animate(
                {"right": "-=100px"},"slow"
            );
        }
    }
});

这并不完美，您需要调整内部窗口宽度以匹配父容器，但这足以让您朝着正确的方向前进。

祝你好运！

Answer 4

试试这个代码：

var sign = [ "+" , "-" ];
var signPosition = 0;
var maxOffset = $(".block").offset().left;
$('.block').click(function() {
    if ($(this).offset().left < 100) {
        signPosition = 1;
    } else if ($(this).offset().left == maxOffset) {
        signPosition = 0;
    }
    $(this).animate(
        {"right": sign[signPosition] + "=100px"},"slow");
});

变量sign 是包含元素可能移动方向的数组，变量signPosition 包含当前使用方向的位置，变量maxOffset 包含起始位置。

希望这会对你有所帮助。