0

我正在构建一个全屏幻灯片，我尝试使用定位、边距和现在的 ScrollTo 来制作左/右幻灯片。

但每次总有一个性能差距需要弥补。我还没有找到一个好的方法来做到这一点，我正在寻求一些帮助。我也尝试过纯 CSS，它运行良好，但在我需要的浏览器中不起作用。

我在这里有一个简单的演示：http: //jsfiddle.net/qkRvS/2/embedded/result/ 和代码：http: //jsfiddle.net/qkRvS/2/

有人可以指出我正确的方向以使这尽可能顺利吗？每次图像更改似乎都没有什么问题。

谢谢！

4

2 回答 2

1

不幸的是，我认为您没有满意的答案。CSS3 转换的 CSS3 转换在支持它的浏览器中提供了最佳性能。对于 ie7-8，操作left属性 out 执行滚动，但在 ie7-8 上可能永远不会看起来非常平滑。Firefox 的性能也不是很好，但越来越好。在某些情况下，我发现left在 Firefox 中的性能比-moz-transform在上一个版本中可能有所改变。所以提示：

  • 尽可能压缩图像。如果可能，请使用 .jpg。
  • 在每个浏览器中测试每个方法
  • 为每个浏览器使用性能最高的方法
  • 如果您使用 jQuery 的动画方法，您可能希望将帧速率从 16 毫秒调整到 30 毫秒，这样浏览器就不会因为重绘而受到重创。
于 2012-09-11T20:10:39.473 回答
0

我想到了。只需在溢出的 div 上使用 CSS3 过渡和“左”，就可以减少重绘。

于 2012-09-12T12:53:38.300 回答