应用投影的最佳方法是什么?

时间:2008-10-27 13:04:15

标签: javascript jquery css animation user-interface

应用阴影的最佳方法是什么?我现在在一个网站上工作,我们有很多这样的网站,但是,我一直在努力寻找最好的方法来做到这一点。该网站的动画很重,因此阴影需要与此配合良好。

我尝试了一个jQuery阴影皮肤。阴影看起来很好并且易于使用,但速度很慢,并且不适用于任何动画(需要大量重绘,非常慢跑)。

我还尝试创建自己的jQuery扩展,将我的元素包装在几个灰色div中,然后稍微偏移它们以产生阴影效果。这很好用。它快速响应动画。然而,它使得DOM操作/遍历变得麻烦,因为所有内容都包含在这些阴影div中。

我知道必须有一个更好的方法,但这不完全是我的强项。想法?

5 个答案:

答案 0 :(得分:3)

ShadedBorder是一个外观漂亮且易于使用的Shadow-Library。检查出来

答案 1 :(得分:1)

你不需要将那些shadow-div包裹在其他内容周围,只需稍微设置它们并将它们放在较低的z-index上! - )

答案 2 :(得分:0)

如果你的主要问题是导航DOM,只需在你的元素中添加一个类和/或id,并用JQuery选择器引用它。如果将ref存储在变量中会更好,所以你不需要太频繁地选择它

答案 3 :(得分:0)

虽然尚未获得完整的跨浏览器支持,但您可以尝试使用CSS 3 text-shadow property

答案 4 :(得分:0)

这在很大程度上取决于您的图像需要更改的频率,以及它们将覆盖的彩色区域。因为我猜你需要注意IE6的合规性,所以大多数alpha-PNG解决方案会引起如此可怕的紧张情绪,以至于你会花费更多时间进行性能优化,而不是你想要猜测的。

为了解决这个问题,由于我们的图像每月修改不到一次,我们通过缓存PHP脚本调用图像,该脚本使用预定义的背景颜色自动应用阴影,因此我们不必依靠任何透明度。这导致更快的下载(更少的HTTP请求)和更快的界面,因为工作中的Javascript / CSS魔法更少。

我知道这是一个非常老派的解决方案,如果你的图像是静态的,上述解决方案是完全可以接受的,但是跨浏览器兼容并且动画可能会迫使你做出这种风格的解决方案。 / p>