用JS實(shí)現(xiàn)網(wǎng)頁元素陰影效果的研究總結(jié)
更新時間：2007年08月19日 12:27:43 作者：
前兩天由于一個小項(xiàng)目想為一元素添加一個陰影效果,但是記得看過某高人寫的"用Div/CSS模擬陰影效果"文章，現(xiàn)在還有一點(diǎn)印象，其思路很簡單，主要是利用幾個層的定位偏移來實(shí)現(xiàn)的陰影特效，于是偶就想能不能封裝成一個js函數(shù)，方便在每個html對象上調(diào)用．
開始偶以為很簡單，但實(shí)現(xiàn)過程中確遇到了很多問題，其中最嚴(yán)重的就是瀏覽器的兼容問題，整整耗了偶整個晚上加半個通宵的時間才搞定，汗呢！不過從這個小東西讓我對js及一些瀏覽器之間的差異及解決辦法有了更多更深刻的認(rèn)識．
總結(jié)于此，以備以后查看方便！
代碼如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
設(shè)計的主題思路是：
對于需要添加陰影的元素:
IE/NS:創(chuàng)建一個與元素大小相同位置相同的層，并利用偏移的方法使該層實(shí)現(xiàn)陰影，然后根據(jù)對元素的絕對位置判斷將層定位到相同的位置并設(shè)置z-index=-1；從而實(shí)現(xiàn)陰影效果．
FF/Opear：思路同上，但因?yàn)镕F/Opear不支持z-index:-1，所以必須通過將原來元素的z-index設(shè)為大于０的值（需要將元素設(shè)為絕對定位）從而達(dá)到覆蓋陰影層的效果，因?yàn)橐O(shè)置z-index，必須將元素設(shè)為絕對定位，因此這里就比較麻煩了，偶的解決辦法是先克隆一個元素完全相同的內(nèi)容，并將其設(shè)為隱藏（使用visibility:hidden）但仍然占位，然后放到原元素的位置，而把原元素設(shè)為絕對定位并設(shè)定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下測試通過
開始偶以為很簡單，但實(shí)現(xiàn)過程中確遇到了很多問題，其中最嚴(yán)重的就是瀏覽器的兼容問題，整整耗了偶整個晚上加半個通宵的時間才搞定，汗呢！不過從這個小東西讓我對js及一些瀏覽器之間的差異及解決辦法有了更多更深刻的認(rèn)識．
總結(jié)于此，以備以后查看方便！
代碼如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
設(shè)計的主題思路是：
對于需要添加陰影的元素:
IE/NS:創(chuàng)建一個與元素大小相同位置相同的層，并利用偏移的方法使該層實(shí)現(xiàn)陰影，然后根據(jù)對元素的絕對位置判斷將層定位到相同的位置并設(shè)置z-index=-1；從而實(shí)現(xiàn)陰影效果．
FF/Opear：思路同上，但因?yàn)镕F/Opear不支持z-index:-1，所以必須通過將原來元素的z-index設(shè)為大于０的值（需要將元素設(shè)為絕對定位）從而達(dá)到覆蓋陰影層的效果，因?yàn)橐O(shè)置z-index，必須將元素設(shè)為絕對定位，因此這里就比較麻煩了，偶的解決辦法是先克隆一個元素完全相同的內(nèi)容，并將其設(shè)為隱藏（使用visibility:hidden）但仍然占位，然后放到原元素的位置，而把原元素設(shè)為絕對定位并設(shè)定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下測試通過
您可能感興趣的文章:
- JSP實(shí)現(xiàn)彈出登陸框以及陰影效果
- WebGL three.js學(xué)習(xí)筆記之陰影與實(shí)現(xiàn)物體的動畫效果
- 利用Three.js如何實(shí)現(xiàn)陰影效果實(shí)例代碼
- js當(dāng)前頁面登錄注冊框,固定div,底層陰影的實(shí)例代碼
- JS當(dāng)前頁面登錄注冊框,固定DIV,底層陰影的實(shí)例代碼
- js 實(shí)現(xiàn)無干擾陰影效果 簡單好用（附文件下載）
- Div+Js實(shí)現(xiàn)的帶陰影菜單 微軟以前網(wǎng)站曾用過
- JavaScript canvas實(shí)現(xiàn)帶有陰影的圖形和文字
相關(guān)文章
range 是用戶選擇區(qū)域的唯一表示方法，存在 w3c 的標(biāo)準(zhǔn)化 range ，以及 ie 特有的 textrange 與 controlrange ，相對于 ie ，w3c 的概念更易于理解，首先簡要介紹一下 w3c range.2011-08-08
這篇文章主要介紹了js怎么判斷瀏覽器類型，當(dāng)類型為ie6時如何不執(zhí)行,需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)手寫簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序手動添加收貨地址省市區(qū)聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
JS實(shí)現(xiàn)選項(xiàng)卡實(shí)例詳解
這篇文章主要介紹了JS實(shí)現(xiàn)選項(xiàng)卡的方法,結(jié)合實(shí)例形式詳細(xì)講述了JavaScript實(shí)現(xiàn)選項(xiàng)卡的布局與功能實(shí)現(xiàn)的完整步驟及相關(guān)技巧,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了Javascript confirm多種使用方法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
這篇文章主要為大家詳細(xì)介紹了純js實(shí)現(xiàn)圖片勻速淡入淡出效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家詳細(xì)介紹了利用模板將HTML從JavaScript中抽離的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
判斷某一個對象里面是否存在某個屬性，是常見錯誤場景排查，但是你真的知道該如何使用嘛，本文為大家整理了常用的三種方法，希望對大家有所幫助2023-05-05
Three.js實(shí)現(xiàn)繪制字體模型示例代碼
最近在學(xué)習(xí)three.js，這篇文章屬于系列文章，下面這篇文章主要給大家介紹了關(guān)于Three.js如何繪制字體模型的相關(guān)資料，通過文中介紹的方法實(shí)現(xiàn)的效果非常的贊，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09