用JS实现网页元素阴影效果的研究总结

更新时间：2007年08月19日 12:27:43 作者：

前两天由于一个小项目想为一元素添加一个阴影效果,但是记得看过某高人写的"用Div/CSS模拟阴影效果"文章，现在还有一点印象，其思路很简单，主要是利用几个层的定位偏移来实现的阴影特效，于是偶就想能不能封装成一个js函数，方便在每个html对象上调用．
　　开始偶以为很简单，但实现过程中确遇到了很多问题，其中最严重的就是浏览器的兼容问题，整整耗了偶整个晚上加半个通宵的时间才搞定，汗呢！不过从这个小东西让我对js及一些浏览器之间的差异及解决办法有了更多更深刻的认识．
总结于此，以备以后查看方便！
代码如下：

<!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;    //浏览器检测    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;        //获取对象的所占的总宽和高（包括边框）    var objWidth=obj.offsetWidth;    var objHeight=obj.offsetHeight;    //对象的绝对位置（元素相对浏览器的像素值）    var objL=0;    var objT=0;    //获取元素的Left和Top值的函数    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;    //创建三个阴影层及内部一个与元素大小相同的白色背景层 （从外层到内层）    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覆盖原来的style值(默认)，1追加到原style值后      if(!obj) return false;      if(!isOpera){  //Opear不支持cssText属性设置        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";    //定义三个阴影层的颜色及最外层位置（因为阴影向坐上偏移3个像素，所以要加上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      //创建一个与原对象内容完全相同的对象并写入原位置      var newNode=obj.cloneNode(true);      newNode.removeAttribute("id");  //删除id属性，防止id冲突      addCssText(newNode,"visibility:hidden",1);      obj.parentNode.insertBefore(newNode,obj);      //在非IE/NS中的Bug的解决办法（P标记默认在body范围内偏移，而body有时有margin）      if(newNode.tagName=="P"){        var BodyMargin=(document.documentElement.offsetHeight-document.body.offsetHeight)/2;        objT=objT-BodyMargin;      }      //设定层的索引大于层默认值0      addCssText(obj,"position:absolute;z-index:2;left:+"+objL+"px;top:"+objT+"px",1);    }    //创建阴影及内容    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 class="content" id="test">dsfgsdfg</div>    <div 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需再刷新一下页面才能执行]

设计的主题思路是：
对于需要添加阴影的元素:
IE/NS:创建一个与元素大小相同位置相同的层，并利用偏移的方法使该层实现阴影，然后根据对元素的绝对位置判断将层定位到相同的位置并设置z-index=-1；从而实现阴影效果．
FF/Opear：思路同上，但因为FF/Opear不支持z-index:-1，所以必须通过将原来元素的z-index设为大于０的值（需要将元素设为绝对定位）从而达到覆盖阴影层的效果，因为要设置z-index，必须将元素设为绝对定位，因此这里就比较麻烦了，偶的解决办法是先克隆一个元素完全相同的内容，并将其设为隐藏（使用visibility:hidden）但仍然占位，然后放到原元素的位置，而把原元素设为绝对定位并设定z-index的值大于０．

在制作过程中遇到很多问题，其中主要问题有：
１，style.cssText属性只有除opera外的浏览器才支持，
２，offsetleft和offsetTop在IE/Opear和FF及NS中解释不同．
（还包括一些不同浏览器出现的小bug，解决办法见上篇日志）

不过好在都一一解决了！现在能兼容大多数浏览器的新版本．偶在IE6.0,FF2.0,NS8.1,Opear9.0下测试通过

您可能感兴趣的文章:

用JS实现网页元素阴影效果的研究总结

range 标准化之获取
range 是用户选择区域的唯一表示方法，存在 w3c 的标准化 range ，以及 ie 特有的 textrange 与 controlrange ，相对于 ie ，w3c 的概念更易于理解，首先简要介绍一下 w3c range.
2011-08-08
js判断浏览器类型为ie6时不执行
这篇文章主要介绍了js怎么判断浏览器类型，当类型为ie6时如何不执行,需要的朋友可以参考下
2014-06-06
小程序实现手写签名
这篇文章主要为大家详细介绍了小程序实现手写签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
微信小程序手动添加收货地址省市区联动
这篇文章主要为大家详细介绍了微信小程序手动添加收货地址省市区联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
JS实现选项卡实例详解
这篇文章主要介绍了JS实现选项卡的方法,结合实例形式详细讲述了JavaScript实现选项卡的布局与功能实现的完整步骤及相关技巧,需要的朋友可以参考下
2015-11-11
Javascript confirm多种使用方法解析
这篇文章主要介绍了Javascript confirm多种使用方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09
纯js实现图片匀速淡入淡出效果
这篇文章主要为大家详细介绍了纯js实现图片匀速淡入淡出效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
如何利用模板将HTML从JavaScript中抽离
这篇文章主要为大家详细介绍了利用模板将HTML从JavaScript中抽离的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
详解JS如何判断对象上是否存在某个属性
判断某一个对象里面是否存在某个属性，是常见错误场景排查，但是你真的知道该如何使用嘛，本文为大家整理了常用的三种方法，希望对大家有所帮助
2023-05-05
Three.js实现绘制字体模型示例代码
最近在学习three.js，这篇文章属于系列文章，下面这篇文章主要给大家介绍了关于Three.js如何绘制字体模型的相关资料，通过文中介绍的方法实现的效果非常的赞，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-09-09

用JS实现网页元素阴影效果的研究总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具