在网页中,经常需要标题里提到的几种效果,实现比较简单,这里总结一下(IE测试通过),以备日后再用。
预备知识:网页中的高和宽 Code
另外,网页中的元素常见定位需要用到的概念一并总结一下:
Code
来看一下笔者写的关于定位和关于宽和高的js函数:
Code
PS:关于dom的一些高和宽,下面这张图有助于我们理解的更清楚: 好了,您猜我一定又会说,“Code is cheap.",没错,看代码先: 一: 浮动div的实现 Code
Float.aspx文件: Code
二: 可拖动div的实现 Code
上面的js怎么用呢?看到down函数的方式你就会猜到一些端倪,好了,看html文件吧: Code
对比浮动div的style,你看到相同点了吗?没错,就是position的那些事儿... 三、遮罩层(div和iframe实现) 下面两个js(myLightBoxDiv.js和myLightBoxFrame.js)介绍遮罩层的不同实现思路,本来可以整合在一起,为了条例清晰把它们分成两个js文件,它们的效果其实是一样的。 (1)div的实现方式 Code
上面的js里让遮罩层over2设置为浮动,下面的html可以让你测试滚动情况下的可以拖动的遮罩效果。 Code
(2)IFrame实现方式 同上,复制下面代码试试看效果吧: Code
html代码: Code
注意上面的html代码里包含两个html文件,主文件是jsTest.html,iframe的src引用的是myJsTest.html文件.总结介绍结束了。^_^ PS:欢迎志同道合的园友共同总结和讨论常见js特效,有好资源一定共享啊,前几天发现一个, ,真好资源也。