Question

我正在尝试在屏幕上制作几张图片。理想情况下，我希望图像以浏览器窗口（无论大小）为中心开始，让它们移动到浏览器窗口的精确位置（比如从顶部100px，从左边100px）。我的动画效果很好，但只相对于起始位置。我无法弄清楚如何在没有固定起点的情况下让它移动到一个特定的位置（这显然违背了中心思路）。

以下是我目前正在处理的代码：

$('img#one').delay(300).animate({left: '-=485', top: '-=448'},500);
$('img#two').delay(800).animate({left: '-=645', top: '-=399'},800);
$('img#dash').delay(800).animate({left:'-=1398'},800);

这是HTML：

<div id="logowrap"><img id="one" src="images/one.png"><img id="two" src="images/two.png"></div>
<img id="dash" src="images/dash.png">
</div>

这是CSS：

#one {
    margin-top: 500px;
    margin-left: 530px;
    position: relative;
    display: block;
    z-index: 6;
}

#dash {
    display: block;
    z-index: 8;
    margin-left: 1600px;
    margin-top: -505px;
    position: relative;

}


body {
    margin: 0;
    width: 100%;
}


#two {
    margin-left: 698px;
    position: relative;
    display: block;
    z-index: 14;
    margin-top: -53px;
}

任何帮助高度赞赏！谢谢！

Answer 1

您可以尝试使用.offset()方法附加元素的绝对位置 - http://api.jquery.com/offset/ - 您可以在文档级别将图像设置为0,0，然后附加，例如100左边和100顶部从文件0,0位置获得绝对值100,100（对不起，现在已经很晚了，但我希望你理解我的随意）。

Answer 2

感谢People，我只是想通了，他的回答引导我朝着正确的方向前进。 FWIW，这是我的最终代码：

$(document).ready(function(){   
var offsetg = $('img#one').offset();
offsetgmoveL = offsetg.left - 42;
offsetgmoveT = offsetg.top + 282;
var offsetM = $('img#two').offset();
offsetMmoveL = offsetM.left +115;
offsetMmoveT = offsetM.top + 232;
    $('img#one').delay(300).animate({left: '-=' + offsetgmoveL + '', top: '-=' + offsetgmoveT + ''},500);
    $('img#two').delay(800).animate({left: '-=' + offsetMmoveL + '', top: '-=' + offsetMmoveT + ''},300);

Jquery从相对位置到绝对位置的动画？可能？

2 个答案: