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

　　推荐阅读

　　Code:　write(s,d) 输出连续字符串

<script type="text/javascript"> <!-- function write(s,d) { d = d || "<br />"; document.write(s+d); return function(s){ return write(s,d); } } write("aaa")("bbb")("ccc")("ddd"); write("1",",")(">>>详细阅读

本文标题：用JS实现网页元素阴影效果的研究总结

地址：http://www.17bianji.com/kaifa2/JS/30166.html

 1/2    1