javascript:浮动div，可拖拽div,遮罩层(div和iframe实现)

在网页中，经常需要标题里提到的几种效果，实现比较简单，这里总结一下（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特效，有好资源一定共享啊，前几天发现一个，http://www.scriptlover.com/controls/，真好资源也。

posted on 2009-01-15 19:37 JeffWong 阅读(11487) 评论(6) 编辑收藏举报