javascript-页面加载时未正确设置位置

我正在创建一个coverflow插件，但是当它第一次加载时，我有一个小问题

根据图像在coverflow中的位置设置图像的大小/样式。当页面第一次加载图像时，所有图像都会正确调整大小，但它们不会自行重新定位。如果我让他们使用左右导航，他们工作正常

我不确定这是什么原因造成的。我想这可能与设置coverflow起始位置的变量有关

这是我的密码：

    <script type="text/javascript" src="/scripts/jquery-ui.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            var coverflowPos = Math.round($('#coverflow img').length / 2)

            $('#coverflow img').each( function(i) {
                $(this).css({'opacity' : 1-(Math.abs(coverflowPos-i)*0.4), 'z-index' : 100-(Math.abs(coverflowPos-i)) }).width(200-(Math.abs(coverflowPos-i)*50)).height(128-(Math.abs(coverflowPos-i)*50));
            });

// If I run the testme() function here, it animates to the right place but I want it to start in this position rather than animate to it

            $('#moveLeft').click( function() {
                if(coverflowPos > 1) {
                    coverflowPos = coverflowPos-1
                }
                testme();
            });

            $('#moveRight').click( function() {
                if(coverflowPos < $("#coverflow img").length -1) {
                    coverflowPos = coverflowPos+1
                }
                testme();
            });

            function testme() {
                $('#coverflow img').each( function(i) {
                    $(this).animate({
                        opacity: 1-(Math.abs(coverflowPos-i)*0.4),
                        width: 200-(Math.abs(coverflowPos-i)*50),
                        height: 128-(Math.abs(coverflowPos-i)*50)
                    }, {
                        duration: 500,
                        easing: 'easeInOutSine'
                    }).css({ 'z-index' : 100-(Math.abs(coverflowPos-i)) });
                });

            };

        });

    </script>

$（文档）.ready（函数（）{
var coverflowPos=数学圆（$（'#coverflow img'）。长度/2）
$（#coverflow img'）。每个（函数（i）{
$（this.css（{'opacity'：1-（Math.abs（coverflowPos-i）*0.4），'z-index'：100-（Math.abs（coverflowPos-i））））。宽度（200-（Math.abs（coverflowPos-i）*50））。高度（128-（Math.abs（coverflowPos-i）*50））；
});
//如果我在这里运行testme（）函数，它将设置动画到正确的位置，但我希望它从这个位置开始，而不是设置动画
$（'#moveLeft'）。单击（函数（）{
如果（coverflowPos>1）{
coverflowPos=coverflowPos-1
}
testme（）；
});
$（'#moveRight'）。单击（函数（）{
如果（coverflowPos<$（“#coverflow img”）。长度-1）{
coverflowPos=coverflowPos+1
}
testme（）；
});
函数testme（）{
$（#coverflow img'）。每个（函数（i）{
$（此）。设置动画({
不透明度：1-（数学绝对值（coverflowPos-i）*0.4），
宽度：200-（数学绝对值（coverflowPos-i）*50），
高度：128-（数学绝对值（coverflowPos-i）*50）
}, {
持续时间：500，
放松：“放松外正弦”
}).css（{'z-index'：100-（Math.abs（coverflowPos-i））}）；
});
};
});

这里有一个指向JSFIDLE的链接：

---

首先检查每个

：

'z-index' : 100-(Math.abs(coverflowPos-i)) }).width(200-(Math.abs(coverflowPos-i)*50)).height(128-(Math.abs(coverflowPos-i)*50));

我想你的意思是：

'z-index' : 100-(Math.abs(coverflowPos-i)),
'width' : 200-(Math.abs(coverflowPos-i)*50),
'height': 128-(Math.abs(coverflowPos-i)*50)

链接到您的
testme（）
函数中

之后，您还可以通过执行
testme（true）添加一个“Hack”在脚本的末尾。
并在
testme（）
函数中添加一个测试参数，将持续时间设置为0，或者只需禁用animate并替换为CSS（）

但是，这只是一个技巧。
在ready（）函数的末尾调用testme（）将它们移动到位。不过，它确实让他们轻松了一些，这看起来有点奇怪，可以通过添加doease参数来摆脱testme（）中的轻松。
200-（Math.abs（coverflowPos-i）*50）
可能小于0——例如

而负宽度最终不被应用，使宽度保持在原来的200px值。不透明度设置正确，所以你得到的只是一个巨大的空白区域，图像所在的位置

var width = 200-(Math.abs(coverflowPos-i)*50);
if ( width < 0 ) width = 0;

var宽度=200-（数学绝对值（coverflowPos-i）*50）；
如果（宽度<0）宽度=0；

很好地覆盖了init

我没有费心去检查为什么动画制作完成后一切正常——我的猜测是，图像已经很小了，所以不那么明显。
问题来自“每个索引”，它没有正确地用于计算第一幅图像的宽度和高度

试试这个：

 $('#coverflow img').each( function(i) {
    i++;
    $(this).css({...

并删除空白。GIF…
在这里，您可以找到我的叉子：
我明白您的意思，但这并不能解决问题。只是用一种不同的方法来实现同样的目标。这是可行的，尽管这是一种笨拙的方法来创造想要的结果。除非其他人能想出更好的办法，否则我会同意。问题是宽度和高度的初始值（可能是负值，因此永远不会设置）。调用testme（）之所以有效，是因为它在动画过程中第二次将宽度设置为非负宽度。除非您将更多图像添加到列表中，否则这是有效的。。。当你到达列表中的第一个图像时，空白图像是用来修复定位问题的。代码>（CopyPoPoS＞1）{< /代码>阻止任何人进入空白图像。好的，但是当检查代码时，您会看到这两个第一个图像没有由函数设置的“权重”A、D“高度”属性。
 $('#coverflow img').each( function(i) {
    i++;
    $(this).css({...