问题描述
我想要做的是：我想在页面的Y轴或X轴（底部和左侧边框）上生成框，并使它们彼此平行移动，直到它们离开屏幕为止，在这里我要删除它们。 到目前为止，这是我所做的：
。
function generate(){
var $element = $("<div>", {class: "box"});
//Generate random x and y coordinates
var posy = (Math.random() * ($('body').height() - $element.width())).toFixed();
var posx = (Math.random() * ($('body').width() - $element.height())).toFixed();
//Place the box on the x or y axis
var rand = Math.floor(Math.random()*2);
if(rand==0)
{
posx=0;
}else{
posy=0;
}
$element.css(
{'position':'absolute',
'right':posx+'px',
'bottom':posy+'px'});
$("body").append($element);
//Move box diagonally, all the boxes paths are parallel
TweenLite.to($element, 2, {top:0, right:0, ease:Power2.easeOut});
//Delete boxes offscreen
var $boxes=$(".box");
/*$boxes.each(function(){
if($(this).position().left >1300){
$(this).remove();
}
});*/
}
我的问题是：如何通过使所有盒子彼此平行移动的方式，准确地找到正确的位置来对盒子进行动画处理？ 而且，有没有一种方法可以不使用外部插件来查找元素是否超出页面范围？ 感谢您的回答！
编辑：这是一张图纸，可以更好地说明自己。 对不起，我糟糕的绘画技能！
现在，所有方框都收敛到相同的top:0和right:0点，但是我想使它们彼此平行，因此，每个方框都应具有不同的top / right点。
我猜我的问题是要计算它，但是我该怎么做呢？
而且，这也与我所涉及的屏幕外问题有关。
1楼
Tahir Ahmed
1
已采纳
2015-07-26 11:34:39
是样的，你要创建的效果呢？
JavaScript：
function generate(){
var windowHeight = $(window).height();
var windowWidth = $(window).width();
var $element = $('<div>', {class: 'box'});
var initX = parseInt(Math.random() * windowWidth) - (windowWidth * 0.5);
var destX = parseInt(initX) + $(window).height();
$('body').append($element);
TweenLite.fromTo($element, 2, {x:initX, y:0}, {x:destX, y:-windowHeight, ease:Power2.easeOut, onComplete: onCompleteAnimation, onCompleteParams: [$element]});
}
function onCompleteAnimation($element) {
$element.remove();
}
您会注意到，我没有使用position: absolute; top和left （或right ）属性position: absolute;动画position: absolute;
你以前在做的
取而代之的是，我正在对x和y进行动画处理，它们实际上是translate(x, y)值。
这使动画看起来很平滑： 。
希望这可以帮助。