在网页中,经常需要标题里提到的几种效果,实现比较简单,这里总结一下(IE测试通过),以备日后再用。
预备知识:网页中的高和宽
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
另外,网页中的元素常见定位需要用到的概念一并总结一下:
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
来看一下笔者写的关于定位和关于宽和高的js函数:
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
PS:关于dom的一些高和宽,下面这张图有助于我们理解的更清楚:
好了,您猜我一定又会说,“Code is cheap.",没错,看代码先:
一: 浮动div的实现
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
三、遮罩层(div和iframe实现)
下面两个js(myLightBoxDiv.js和myLightBoxFrame.js)介绍遮罩层的不同实现思路,本来可以整合在一起,为了条例清晰把它们分成两个js文件,它们的效果其实是一样的。
(1)div的实现方式
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
同上,复制下面代码试试看效果吧:
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
PS:欢迎志同道合的园友共同总结和讨论常见js特效,有好资源一定共享啊,前几天发现一个, http://www.scriptlover.com/controls/,真好资源也。
本文转自JeffWong博客园博客,原文链接:http://www.cnblogs.com/jeffwongishandsome/archive/2009/01/15/1359309.html,如需转载请自行联系原作者