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实现方式
同上，复制下面代码试试看效果吧：

//myLightBoxFrame.js
var isIE = (document.all) ? true : false; //document.all 只有ie支持此属性
var ieVersion = 7; //IE版本，默认为7
if (isIE) {
 ieVersion = parseFloat(navigator.appVersion.split("MSIE")[1]);
}
var de = getBodyObj();
function getBodyObj() {
 return (document.documentElement) ? document.documentElement : document.body;
}
function resetCSS(elem, prop) { for (var i in prop) { elem.style[i] = prop[i]; } }
//滚动条位置
function scrollX() { return self.pageXOffset || de && de.scrollLeft || document.body.scrollLeft; }
function scrollY() { return self.pageYOffset || de && de.scrollTop || document.body.scrollTop; }
//可视尺寸
function windowW() { return self.innerWidth || de && de.clientWidth || document.body.clientWidth; }
function windowH() { return self.innerHeight || de && de.clientHeight || document.body.clientHeight; }
//页面尺寸（最小不小于可视尺寸）
function pageW() { var s = document.body.scrollWidth; var c = windowW(); return s > c ? s : c; }
function pageH() { var s = document.body.scrollHeight; var c = windowH(); return s > c ? s : c; }
//lightbox显示和隐藏
function createFrameOverLayer(w, h, href) {
 //内容
 var tempInnerHtml = "<div id=\"divProcessHead\" style='width:100%;margin:0 auto;position:absolute;top:0px;padding-top:8px;text-align:right;background-color:#fff' id='overprogress'>";
 tempInnerHtml += " 关闭</div>";
 tempInnerHtml += " <iframe scrolling='no' frameborder='0' src='" + href + "' width='100%' height='100%'></iframe>";
 //建立lightbox
 var over = document.createElement("div");
 over.id = "myLightBoxLayer";
 var over2 = document.createElement("div");
 over2.id = "myProcessLayer";
 document.body.appendChild(over);
 document.body.appendChild(over2);
 //重设lightbox尺寸和位置
 function resetOver() {
 //设定遮掩层尺寸
 resetCSS(over, { position: "absolute", zIndex: "998", top: "0px", left: "0px", backgroundColor: "gray", opacity: "0.5", filter: "alpha(opacity=80)", width: pageW() + "px", height: pageH() + "px" });

 //设定弹出层尺寸和位置
 var eh = windowH() - h;
 var ew = windowW() - w;
 eh = eh < 0 ? 0 : eh;
 ew = ew < 0 ? 0 : ew;
 resetCSS(over2, { position: "absolute", zIndex: "999", width: w + "px", height: h + "px", left: scrollX() + parseInt(ew / 2) + "px", top: scrollY() + parseInt(eh / 2) + "px", overFlow: "hidden" });
 // over2.onmousedown = "down(this)";
 };
 resetOver();
 window.onresize = resetOver;
 window.onscroll = resetOver;
 if (ieVersion != 7) { //将所有select置为不可用
 var oSelects = document.getElementsByTagName("select");
 for (var i = 0; i < oSelects.length; i++) {
 oSelects[i].disabled = true;
 }
 }
 over2.innerHTML = tempInnerHtml;
}

//点击关闭lightbox
function closeLightBox() {
 var over = document.getElementById("myLightBoxLayer");
 var over2 = document.getElementById("myProcessLayer");
 document.body.removeChild(over);
 document.body.removeChild(over2);
 if (ieVersion != 7) { //将所有select置为可用
 var oSelects = document.getElementsByTagName("select");
 for (var i = 0; i < oSelects.length; i++) {
 oSelects[i].disabled = false;
 }
 }
}

html代码：

//JsTest.html
<html>
<head>
<title>Cover Layer</title>
<script src="js/myLightBoxFrame.js" type="text/javascript"></script>
<script src="js/dragDiv.js" type="text/javascript"></script>
</head>
<body>
<select id="Select1">
 <option>test test test test test</option>
</select>
 
<select id="Select2" multiple="multiple">
 <option>test test test test test</option>
</select>
测试
 test test test test test test test test test test test test test test
 test test test test test test test test test test test test test test
 test test test test test test test test test test test test test test
 test test test test test test test test test test test test test test
 test test test test test test test test test test test test test test
 test test test test test test test test test test test test test test
 test test test test test test test test test test test test test test
 test test test test test test test test test test test test test test
 test test test test test test test test test test test test test test
 test test test test test test test test test test test test test test
 test test test test test test test test test test test test test test
 test test test test test test test test test test test test test test
测试
</body>
</html>

//第二个html文件，myJsTest.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<div style="margin-top: 80px; text-align: center">
 <a href="#" onclick="alert('confirm')">确定</a>  <a href="#" onclick="alert('cancel')">取消</a>
</div>
</body>
</html>

注意上面的html代码里包含两个html文件，主文件是jsTest.html,iframe的src引用的是myJsTest.html文件.总结介绍结束了。^_^
PS:欢迎志同道合的园友共同总结和讨论常见js特效，有好资源一定共享啊，前几天发现一个，http://www.scriptlover.com/controls/，真好资源也。

zhaizi:http://www.cnblogs.com/jeffwongishandsome/archive/2009/01/15/1359309.html

posted @ 2011-04-25 15:35 peterlee 阅读(642) 评论(0) 收藏举报

刷新页面返回顶部

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

公告