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

简介:

在网页中,经常需要标题里提到的几种效果,实现比较简单,这里总结一下(IE测试通过),以备日后再用。
预备知识:网页中的高和宽

ContractedBlock.gif Code

另外,网页中的元素常见定位需要用到的概念一并总结一下:

ContractedBlock.gif Code

来看一下笔者写的关于定位和关于宽和高的js函数:

ContractedBlock.gif Code


PS:关于dom的一些高和宽,下面这张图有助于我们理解的更清楚:

好了,您猜我一定又会说,“Code is cheap.",没错,看代码先:
一: 浮动div的实现

ContractedBlock.gif Code
Float.aspx文件:
ContractedBlock.gif Code
二: 可拖动div的实现
ContractedBlock.gif Code
上面的js怎么用呢?看到down函数的方式你就会猜到一些端倪,好了,看html文件吧:
ContractedBlock.gif Code
对比浮动div的style,你看到相同点了吗?没错,就是position的那些事儿...
三、遮罩层(div和iframe实现)
下面两个js(myLightBoxDiv.js和myLightBoxFrame.js)介绍遮罩层的不同实现思路,本来可以整合在一起,为了条例清晰把它们分成两个js文件,它们的效果其实是一样的。
(1)div的实现方式
ContractedBlock.gif Code
上面的js里让遮罩层over2设置为浮动,下面的html可以让你测试滚动情况下的可以拖动的遮罩效果。
ContractedBlock.gif Code
(2)IFrame实现方式
同上,复制下面代码试试看效果吧:
ContractedBlock.gif Code
html代码:
ContractedBlock.gif Code
注意上面的html代码里包含两个html文件,主文件是jsTest.html,iframe的src引用的是myJsTest.html文件.总结介绍结束了。^_^
PS:欢迎志同道合的园友共同总结和讨论常见js特效,有好资源一定共享啊,前几天发现一个, http://www.scriptlover.com/controls/,真好资源也。







本文转自JeffWong博客园博客,原文链接:http://www.cnblogs.com/jeffwongishandsome/archive/2009/01/15/1359309.html,如需转载请自行联系原作者

目录
相关文章
|
8天前
|
前端开发 JavaScript
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
|
11天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
5月前
|
JavaScript
js通过input框输入属性和值,改变div的属性
js通过input框输入属性和值,改变div的属性
75 0
|
4月前
|
JavaScript 索引
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
37 0
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
19 0
|
3月前
|
Web App开发 移动开发 JavaScript
一篇文带你使用js实现拖拽排序
一篇文带你使用js实现拖拽排序
|
3月前
|
JavaScript
js实现iframe框架的面包屑功能
js实现iframe框架的面包屑功能
|
3月前
|
JavaScript
原生js实现div跳动效果---很多炫酷效果的基本原理
原生js实现div跳动效果---很多炫酷效果的基本原理
20 0
|
3月前
|
JavaScript 前端开发
原生js与jQuery显示隐藏div的几种方法
原生js与jQuery显示隐藏div的几种方法
36 0