为啥html会偏移到屏幕外面,javascript – 一旦达到屏幕侧面,怎样反转移动div的方向？...

工作小提琴：

https://jsfiddle.net/ebkc9dzL/19/

您需要在点击功能之外有一个变量,它将告诉您动画的方向,因此一旦在点击功能中,您可以使用getBoundingClientRect()(mdn reference)计算动画对象的位置.

然后,如果对象向左移动,并且其左距离小于其自己的宽度,则需要将其移动到足以使其到达边缘.如果它在边缘(左边是零),你需要改变方向.

如果它正在移动,其正确的距离小于自己的宽度,则只需要移动它就足够了(由window.innerWidth – 100计算,因为100是对象的宽度),以便它到达边缘.如果它在右边,你需要改变方向.

传递给jQuery的动画功能的对象的改变方向是从其“右”属性中添加或减去的一个简单问题.

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

distance = (window.innerWidth-rect.right);

else if(rect.right+1 >=window.innerWidth){

direction = "+";

}

}

obj = {"right": direction+"="+distance.toString()+"px"}

$(this).animate(obj,"slow");

});