前兩天由于一個(gè)小項(xiàng)目想為一元素添加一個(gè)陰影效果,但是記得看過(guò)某高人寫(xiě)的"用Div/CSS模擬陰影效果"文章，現(xiàn)在還有一點(diǎn)印象，其思路很簡(jiǎn)單，主要是利用幾個(gè)層的定位偏移來(lái)實(shí)現(xiàn)的陰影特效，于是偶就想能不能封裝成一個(gè)js函數(shù)，方便在每個(gè)html對(duì)象上調(diào)用．
　　開(kāi)始偶以為很簡(jiǎn)單，但實(shí)現(xiàn)過(guò)程中確遇到了很多問(wèn)題，其中最嚴(yán)重的就是瀏覽器的兼容問(wèn)題，整整耗了偶整個(gè)晚上加半個(gè)通宵的時(shí)間才搞定，汗呢！不過(guò)從這個(gè)小東西讓我對(duì)js及一些瀏覽器之間的差異及解決辦法有了更多更深刻的認(rèn)識(shí)．
總結(jié)于此，以備以后查看方便！
代碼如下：

設(shè)計(jì)的主題思路是：
對(duì)于需要添加陰影的元素:
IE/NS:創(chuàng)建一個(gè)與元素大小相同位置相同的層，并利用偏移的方法使該層實(shí)現(xiàn)陰影，然后根據(jù)對(duì)元素的絕對(duì)位置判斷將層定位到相同的位置并設(shè)置z-index=-1；從而實(shí)現(xiàn)陰影效果．
FF/Opear：思路同上，但因?yàn)镕F/Opear不支持z-index:-1，所以必須通過(guò)將原來(lái)元素的z-index設(shè)為大于０的值（需要將元素設(shè)為絕對(duì)定位）從而達(dá)到覆蓋陰影層的效果，因?yàn)橐O(shè)置z-index，必須將元素設(shè)為絕對(duì)定位，因此這里就比較麻煩了，偶的解決辦法是先克隆一個(gè)元素完全相同的內(nèi)容，并將其設(shè)為隱藏（使用visibility:hidden）但仍然占位，然后放到原元素的位置，而把原元素設(shè)為絕對(duì)定位并設(shè)定z-index的值大于０．

在制作過(guò)程中遇到很多問(wèn)題，其中主要問(wèn)題有：
１，style.cssText屬性只有除opera外的瀏覽器才支持，
２，offsetleft和offsetTop在IE/Opear和FF及NS中解釋不同．
（還包括一些不同瀏覽器出現(xiàn)的小bug，解決辦法見(jiàn)上篇日志）

不過(guò)好在都一一解決了！現(xiàn)在能兼容大多數(shù)瀏覽器的新版本．偶在IE6.0,FF2.0,NS8.1,Opear9.0下測(cè)試通過(guò)

最新評(píng)論