javascript - 应用投影的最佳方法是什么？

Question

应用阴影的最佳方法是什么？我现在正在一个网站上工作，我们有很多这样的网站，但是，我一直在努力寻找最好的方法来做到这一点。该网站的动画非常繁重，因此阴影需要很好地处理这个问题。

我尝试了一个 jQuery 阴影插件。阴影看起来不错并且易于使用，但速度很慢并且不适用于任何动画（需要大量重绘，非常缓慢）。

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

我知道必须有更好的方法，但这并不是我的强项。想法？

score 3 · Accepted Answer

3

ShadedBorder是一个外观漂亮且易于使用的 Shadow-Library。看看这个

于 2008-10-27T13:29:51.470 回答

score 1 · Accepted Answer

您不需要将这些 shadow-div 包裹在其他内容周围，只需将它们稍微倾斜并将它们放在较低的 z-index 上！-)

score 0 · Accepted Answer

如果您的主要问题是导航 DOM，只需向您的元素添加一个类和/或 id，并使用 JQuery 选择器引用它。如果您将 ref 存储在变量中会更好，因此您不需要过于频繁地选择它

score 0 · Accepted Answer

虽然它还没有完全的跨浏览器支持，但您可能想尝试使用CSS 3 text-shadow 属性。

score 0 · Accepted Answer

这在很大程度上取决于您的图像需要更改的频率以及它们将覆盖的彩色区域。因为我猜您需要注意 IE6 合规性，所以大多数 alpha-PNG 解决方案会导致如此可怕的抖动，以至于您在性能优化上花费的时间比您想猜测的要多。

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

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

5 回答 5