博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript:浮动div,可拖拽div,遮罩层(div和iframe实现)
阅读量:5953 次
发布时间:2019-06-19

本文共 832 字,大约阅读时间需要 2 分钟。

在网页中,经常需要标题里提到的几种效果,实现比较简单,这里总结一下(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特效,有好资源一定共享啊,前几天发现一个, ,真好资源也。
本文转自JeffWong博客园博客,原文链接:http://www.cnblogs.com/jeffwongishandsome/archive/2009/01/15/1359309.html,如需转载请自行联系原作者
你可能感兴趣的文章
记录一下这次web实训的两个网站
查看>>
POJ-1830 开关问题 高斯消元
查看>>
HDU-4366 Successor 线段树+预处理
查看>>
做程序开发的你如果经常用Redis,这些问题肯定会遇到
查看>>
CAS-认证流程
查看>>
006android初级篇之jni数据类型映射
查看>>
Java 集合框架查阅技巧
查看>>
apache配置虚拟主机
查看>>
CollectionView水平和竖直瀑布流的实现
查看>>
前端知识复习一(css)
查看>>
spark集群启动步骤及web ui查看
查看>>
Maven学习笔记二:常用命令
查看>>
利用WCF改进文件流传输的三种方式
查看>>
程序员的素养
查看>>
Spring学习总结(2)——Spring的常用注解
查看>>
关于IT行业人员吃的都是青春饭?[透彻讲解]
查看>>
钱到用时方恨少(随记)
查看>>
mybatis主键返回的实现
查看>>
org.openqa.selenium.StaleElementReferenceException
查看>>
Android Intent传递对象为什么要序列化?
查看>>