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

我正在创建一个coverflow插件，但第一次加载时遇到了一些小问题。javascript - 在页面加载时未正确设置位置

图像的大小/风格是根据它们在封面流中的位置设置的。当页面第一次加载图片时，所有的图片都调整好了，但是它们并没有重新定位。如果我他们使用左侧和右侧导航，他们正常工作。

我不确定是什么原因造成的。我想这可能是是与那台的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/

来源

2011-03-10 Tom

在ready（）函数结束时调用testme（）将它们移动到位。但它确实缓解了它们，但看起来有点奇怪，可以通过添加一个doease参数来消除testme（）中的易用性。

来源

2011-03-10 11:27:20

这会工作，虽然它是一种笨重的方式去创造预期的结果。除非任何人能想到更好的东西，否则我会去做。 – Tom 2011-03-10 11:38:14

问题是宽度和高度的初始值（可能是负值，因此永远不会设置）。调用testme（）是可行的，因为它在动画期间第二次设置宽度，这次是非负面的。 – Athena 2011-03-11 07:45:29

检查用你的拳头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)

临客在你testme()功能？！

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

但是，它只是一个黑客。

来源

2011-03-10 11:07:39 Akarun

我明白你说什么，不但解决问题。用不同的方式来达到同样的目的。 – Tom 2011-03-10 11:15:06

200-(Math.abs(coverflowPos-i)*50)

可以小于0 - 例如，

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

和负宽度最终没有被应用，留下宽度在其原始200像素值。不透明度设置得当，所以你得到的图像是一个巨大的空白空间。

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

很好地涵盖了init。

我还没有仔细检查它为什么没有问题，一旦它动画 - 我的猜测是，图像已经很小，所以它没有那么明显。

来源

2011-03-10 12:12:36 Athena

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

试试这个：

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

，并清除Blank.gif ...

在这里，你会发现我的叉子拨弄：http://jsfiddle.net/akarun/FQWQa/

来源

2011-03-10 12:50:50 Akarun

这是有效的，除非你添加更多的图像到列表中......当你到达列表中的第一个图像时，空白图像就是为了解决定位问题...... if（coverflowPos> 1）{'从获得空白图像。 – Tom 2011-03-10 13:16:17

好的，但在检查代码时，您会看到两个第一个图像没有由该函数设置的“weight”a和d“height”属性。以这种方式搜索... – Akarun 2011-03-10 13:28:31

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

回答

相关问题