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

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

前兩天由于一個(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é)于此，以備以后查看方便！
代碼如下：

<!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>  <script type="text/javascript">  function addShadow(){    var obj;    if(arguments.length==1){      obj=document.getElementById?document.getElementById(arguments[0]):document.all[arguments[0]];    }    else if(arguments.length>1){      for(var i=0;i<arguments.length;i++){        addShadow(arguments[i]);      }    }else{      return false;    }    if(!obj) return false;    //瀏覽器檢測(cè)    var userAgent=navigator.userAgent.toLowerCase();    var isOpera=userAgent.indexOf('opera')>-1;    var isIE=userAgent.indexOf('msie')>-1&&!isOpera;    //var isKHTML=userAgent.indexOf('khtml')>-1||userAgent.indexOf('konqueror')>-1||userAgent.indexOf('AppleWebKit')>-1;    //var isMoz=userAgent.indexOf('gecko')>-1&&!isKHTML;  // FF||Netscape    var isNS=userAgent.indexOf("netscape")>-1;        //獲取對(duì)象的所占的總寬和高（包括邊框）    var objWidth=obj.offsetWidth;    var objHeight=obj.offsetHeight;    //對(duì)象的絕對(duì)位置（元素相對(duì)瀏覽器的像素值）    var objL=0;    var objT=0;    //獲取元素的Left和Top值的函數(shù)    var getLT=function(tempObj){      if(!tempObj) return false;      var LL=0,TT=0;      if(isIE||isOpera){  // IE||Opera        while(tempObj!=null&&tempObj.nodeName!="#document"){          LL+=tempObj.offsetLeft;          TT+=tempObj.offsetTop;          tempObj=tempObj.parentNode;        }      }else{  // FF||Netscape        TT=tempObj.offsetTop;        LL=tempObj.offsetLeft;      }      return {T:TT,L:LL};    }    //讀取元素的Top和Left值    var temp=getLT(obj);    objL=temp.L;    objT=temp.T;    //創(chuàng)建三個(gè)陰影層及內(nèi)部一個(gè)與元素大小相同的白色背景層 （從外層到內(nèi)層）    var div1=document.createElement("div");    var div2=document.createElement("div");    var div3=document.createElement("div");    var div4=document.createElement("div");    var addCssText=function(obj,cssText,append){  //append:0覆蓋原來(lái)的style值(默認(rèn))，1追加到原style值后      if(!obj) return false;      if(!isOpera){  //Opear不支持cssText屬性設(shè)置        if(!append){          obj.style.cssText=cssText;        }else{          obj.style.cssText+=cssText        }      }else{        if(!append){          obj.setAttribute("style",cssText);        }else{          obj.setAttribute("style",obj.getAttribute("style")+";"+cssText);        }      }    }    //定義陰影部分通用樣式    var sCssText="width:100%;height:100%;position:absolute;margin:0px;padding:0px;top:-1px;left:-1px";    //定義三個(gè)陰影層的顏色及最外層位置（因?yàn)殛幱跋蜃掀?個(gè)像素，所以要加上3）和高寬    addCssText(div1,"position:absolute;left:"+(objL+3)+"px;top:"+(objT+3)+"px;width:"+objWidth+"px;height:"+objHeight+"px;background:#eee");    addCssText(div2,sCssText+";background:#ddd");    addCssText(div3,sCssText+";background:#ccc");    addCssText(div4,sCssText+";background:#fff");  //白色背景層    if(isIE||isNS){  //IE||NS      addCssText(div1,";z-index:-1",1);    }else{    //FF||Netscape      //創(chuàng)建一個(gè)與原對(duì)象內(nèi)容完全相同的對(duì)象并寫(xiě)入原位置      var newNode=obj.cloneNode(true);      newNode.removeAttribute("id");  //刪除id屬性，防止id沖突      addCssText(newNode,"visibility:hidden",1);      obj.parentNode.insertBefore(newNode,obj);      //在非IE/NS中的Bug的解決辦法（P標(biāo)記默認(rèn)在body范圍內(nèi)偏移，而body有時(shí)有margin）      if(newNode.tagName=="P"){        var BodyMargin=(document.documentElement.offsetHeight-document.body.offsetHeight)/2;        objT=objT-BodyMargin;      }      //設(shè)定層的索引大于層默認(rèn)值0      addCssText(obj,"position:absolute;z-index:2;left:+"+objL+"px;top:"+objT+"px",1);    }    //創(chuàng)建陰影及內(nèi)容    div1.appendChild(div2);    div2.appendChild(div3);    div3.appendChild(div4);    document.body.appendChild(div1);  }  window.onload=window.onresize=function(){    addShadow("test","add","go","ddd","img","newp")  };  </script>  </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="uh7hoam"   class="content" id="test">dsfgsdfg</div>    <div   class="nvhmtl2"   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需再刷新一下頁(yè)面才能執(zhí)行]

設(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ò)

您可能感興趣的文章: