快捷導(dǎo)航

用JS實現(xiàn)網(wǎng)頁元素陰影效果的研究總結(jié)

更新時間：2007年08月19日 12:27:43 作者：

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title></title>  <style type="text/css">  *{  margin:0px;  }  #msgdiv{    border:1px solid #d3d3d3;    text-align:center;font-size:12px;    width:150px;line-height:50px;    background:#f7f7f7;color:#f00;  }  .content{    border:1px solid #999;    background:#f0f0f0;    width:150px;height:50px;  }  </style>    </head>  <body>  <p id="ddd" onclick="alert(document.body.innerHTML);">kkkkk</p>    <div style="position:absolute;left:200px;top:250px;width:150px;height:150px;border:1px solid #f00" id="go">safasdf</div>    <div   id="vvxyksv9kd"   class="content" id="test">dsfgsdfg</div>    <div   class="vvxyksv9kd"   id="add" style="border:1px solid #000;background:#fff">aaaaaaaaaaaaaaaaaaa</div>    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="pic001.jpg" id="img" alt="" /></img>  <p id="newp" style="width:300px;height:50px;border:1px solid #00f">aaaaaaaaaaa</p>  </body>  </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

設(shè)計的主題思路是：
對于需要添加陰影的元素:
IE/NS:創(chuàng)建一個與元素大小相同位置相同的層，并利用偏移的方法使該層實現(xiàn)陰影，然后根據(jù)對元素的絕對位置判斷將層定位到相同的位置并設(shè)置z-index=-1；從而實現(xiàn)陰影效果．
FF/Opear：思路同上，但因為FF/Opear不支持z-index:-1，所以必須通過將原來元素的z-index設(shè)為大于０的值（需要將元素設(shè)為絕對定位）從而達(dá)到覆蓋陰影層的效果，因為要設(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下測試通過

您可能感興趣的文章: