Question

我正在创建一个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>

这里是jsfiddle的链接：

http://jsfiddle.net/r8NqP/4/

Answer 1

在ready（）函数结束时调用testme（）会将它们移动到位。尽管它看起来有点奇怪，但它可以通过添加一个doease参数来摆脱testme（）中的轻松。

Answer 2

检查拳头each：

'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)

Linke在你的testme()函数中？！

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

但是，它只是一个哈克。

Answer 3

200-(Math.abs(coverflowPos-i)*50)可能小于0 - 例如，

200-(5-0)* 50= 200 - 250 = -50

负宽度最终未应用，宽度保持原始的200px值。不透明度设置得当，所以你得到的只是图像所在的巨大空白区域。

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

很好地涵盖了初始化。

我没有费心去检查为什么它一旦动画就可以了 - 我的猜测是，图像已经很小了，所以它并不明显。

Answer 4

问题来自“每个索引”，它没有正确用于计算第一个图像的宽度和高度。

试试这个：

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

删除Blank.gif ...

在这里，你找到了我的叉子小提琴：http://jsfiddle.net/akarun/FQWQa/

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

4 个答案: