2008-10-27 61 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魔術。

我知道這是一個非常老派的解決方案,如果您的圖片是靜態的,但上述解決方案完全可以接受,但跨瀏覽器兼容和動畫可能會迫使您做出這種風格的解決方案。

相關問題