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/
    本文版权归作者和博客园共有，欢迎围观转载。转载时请您务必在文章明显位置给出原文链接，谢谢您的合作。

  • 相关阅读:
    关于div 浮动在select，或table控件之上
    页面table的每行都有一个<input type='button' />,如何实现点击按钮在按钮下方弹出一个div，点击空白消失
    BAT 遍历文件夹和子文件夹下所有文件
    在windows上一键编译各种版本的protobuf(2017-12-05修改)
    安装CentOS Core之后布置环境脚本
    优先级队列
    Ubuntu 设置Vim tab为四个空格
    Mysql 只导出数据,不包含表结构
    Kib Kb KB KIB 区别
    护眼色
  • 原文地址：https://www.cnblogs.com/jeffwongishandsome/p/1359309.html
Copyright © 2011-2022 走看看