|
|
開始偶以為很簡單，但實現(xiàn)過程中確遇到了很多問題，其中最嚴重的就是瀏覽器的兼容問題，整整耗了偶整個晚上加半個通宵的時間才搞定，汗呢！不過從這個小東西讓我對js及一些瀏覽器之間的差異及解決辦法有了更多更深刻的認識．
總結于此，以備以后查看方便！
代碼如下：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
設計的主題思路是：
對于需要添加陰影的元素:
IE/NS:創(chuàng)建一個與元素大小相同位置相同的層，并利用偏移的方法使該層實現(xiàn)陰影，然后根據(jù)對元素的絕對位置判斷將層定位到相同的位置并設置z-index=-1；從而實現(xiàn)陰影效果．
FF/Opear：思路同上，但因為FF/Opear不支持z-index:-1，所以必須通過將原來元素的z-index設為大于０的值（需要將元素設為絕對定位）從而達到覆蓋陰影層的效果，因為要設置z-index，必須將元素設為絕對定位，因此這里就比較麻煩了，偶的解決辦法是先克隆一個元素完全相同的內容，并將其設為隱藏（使用visibility:hidden）但仍然占位，然后放到原元素的位置，而把原元素設為絕對定位并設定z-index的值大于０．
在制作過程中遇到很多問題，其中主要問題有：
１，style.cssText屬性只有除opera外的瀏覽器才支持，
２，offsetleft和offsetTop在IE/Opear和FF及NS中解釋不同．
（還包括一些不同瀏覽器出現(xiàn)的小bug，解決辦法見上篇日志）
不過好在都一一解決了！現(xiàn)在能兼容大多數(shù)瀏覽器的新版本．偶在IE6.0,FF2.0,NS8.1,Opear9.0下測試通過
JavaScript技術：用JS實現(xiàn)網(wǎng)頁元素陰影效果的研究總結，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
