zoukankan      html  css  js  c++  java

  • 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/，真好资源也。


    作者：Jeff Wong
    出处：http://jeffwongishandsome.cnblogs.com/
    本文版权归作者和博客园共有，欢迎围观转载。转载时请您务必在文章明显位置给出原文链接，谢谢您的合作。

  • 相关阅读:
    数据库范式
    服务器防火墙
    Java垃圾回收（GC）机制详解
    Java内存模型
    类加载器
    Java类加载机制
    java虚拟机：Java内存区域及对象
    初识HashMap
    初识LinkedList
    java ArrayList
  • 原文地址：https://www.cnblogs.com/jeffwongishandsome/p/1359309.html
Copyright © 2011-2022 走看看