2008-10-27 59 views
3

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

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

我试过了jQuery shadow pulgin。阴影看起来很好,很容易使用,但速度很慢,并且对任何动画都不能很好地工作(需要大量重绘,非常慢)。

我也尝试创建自己的jQuery扩展,将我的元素包裹在一对灰色的div中,然后将它们偏移一点以产生阴影效果。这很好。它快速响应动画。但是,它使得DOM操作/遍历繁琐,因为所有东西都被包裹在这些影子div中。

我知道必须有更好的方法,但这并不完全是我的特长。思考?

+0

这是那些太难以在所有浏览器中有效运行并具有良好性能的事情之一。我希望IE9(是9)开始支持CSS3,这将是一个解决的问题,但对于IE6,IE7和IE8,你会发现这很难。 – scunliffe 2008-10-27 13:11:43

+0

您是否检查过http://stackoverflow.com/questions/165446/where-can-i-find-a-good-jquery-drop-shadow-plugin? – 2008-10-27 13:29:49

回答

3

ShadedBorder是一个好看,易于使用的影库。检查出来

0

如果你的主要问题是浏览DOM,只需向你的元素添加一个类和/或id,然后用jQuery选择器引用它。甚至更好,如果你把参数存储在一个变量中,所以你不需要太频繁地选择它

1

你不需要把这些影子div围绕其他内容,只需设置它们有点歪斜和放置他们在一个较低的Z - 索引! - )

0

这很大程度上取决于您的图片需要更改的频率以及它们将覆盖的颜色区域。因为我猜测你需要关注IE6合规性,所以大多数alpha-PNG解决方案都会导致如此恐怖的紧张情绪,以至于你会花费更多时间在性能优化方面比你想要猜测的更多。

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

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

相关问题