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

最新推荐文章于 2021-06-28 07:37:36 发布

iteye_15898

最新推荐文章于 2021-06-28 07:37:36 发布

阅读量107

点赞数

文章标签： javascript xhtml c# ViewUI

转自：http://kb.cnblogs.com/a/1593190/

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

//获取浏览器的宽和高（多种浏览器）
functiongetNavWidthandHeightInfo()
{
vars="";
s+="网页可见区域宽："+document.body.clientWidth;
s+="网页可见区域高："+document.body.clientHeight;
s+="网页可见区域宽："+document.body.offsetWidth+"(包括边线和滚动条的宽)";
s+="网页可见区域高："+document.body.offsetHeight+"(包括边线的宽)";
s+="网页正文全文宽："+document.body.scrollWidth;
s+="网页正文全文高："+document.body.scrollHeight;
s+="网页被卷去的高(ff)："+document.body.scrollTop;
s+="网页被卷去的高(ie)："+document.documentElement.scrollTop;
s+="网页被卷去的左："+document.body.scrollLeft;
s+="网页正文部分上："+window.screenTop;
s+="网页正文部分左："+window.screenLeft;
s+="屏幕分辨率的高："+window.screen.height;
s+="屏幕分辨率的宽："+window.screen.width;
s+="屏幕可用工作区高度："+window.screen.availHeight;
s+="屏幕可用工作区宽度："+window.screen.availWidth;
s+="你的屏幕设置是:"+window.screen.colorDepth+"位彩色";
s+="你的屏幕设置:"+window.screen.deviceXDPI+"像素/英寸";
s += "当前窗口的内部宽度:"+ window.innerWidth;
s += "当前窗口的内部高度:"+ window.innerHeight;
//alert(s);
}
getNavWidthandHeightInfo();

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

HTML中的元素定位:

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度
scrollHeight:获取对象的滚动高度

offsetLeft:获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置
offsetHeight:获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的高度

event.clientX相对文档的水平座标
event.clientY相对文档的垂直座标

event.offsetX相对容器的水平坐标
event.offsetY相对容器的垂直坐标

document.documentElement.scrollTop垂直方向滚动的值

event.clientX+document.documentElement.scrollTop相对文档的水平座标+垂直方向滚动的量

(注意：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

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

/*关于位置(前面两种常用)*/

//1.取鼠标的位置(Coordinate坐标x和y)兼容IE,FF和其他主流浏览器(οnmοuseοver="getMouseCoordinate(event)")
functiongetMouseCoordinate(ev){
vare=ev?ev:(window.event?window.event:null);
if(e.pageX||e.pageY){
alert("x:"+e.pageX+"--y:"+e.pageY);
}
else{
alert("x:"+event.x+"--y:"+event.y);
}
}

//2.通过控件获取控件在页面的位置(oControl是控件)
functiongetControlCoordinateByControl(oControl){
varleftPos=oControl.offsetLeft;
vartopPos=oControl.offsetTop;
varheight=oControl.offsetHeight;
while(oControl=oControl.offsetParent){
leftPos+=oControl.offsetLeft;
topPos+=oControl.offsetTop;
}
alert("x:"+leftPos+"--y:"+topPos);
}

//3.通过控件自身取得控件的宽和高,返回width和height
functiongetControlWidthAndHeightByControl(oControl){
//varwidth=oControl.style.width;
//varheight=oControl.style.height;
varwidth=oControl.offsetWidth;
varheight=oControl.offsetHeight;
alert("width:"+width+"--height:"+height);
}

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

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

//floatDiv.js
functionMoveFloatLayer(){
varx=document.documentElement.clientWidth/2;
vary=document.documentElement.clientHeight/2;
vardocuTop=document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop;
vary=docuTop+y;
vardivTopBar=document.getElementById("divFloat");
//divTopBar.style.left=x;
//divTopBar.style.top=y;
divTopBar.style.pixelLeft=x;
divTopBar.style.pixelTop=y;

//alert("nowx:"+x+"&nowy:"+y);
}

functioninitialFloatDiv(){
window.setInterval(MoveFloatLayer,20);
}

window.onload=initialFloatDiv;

Float.aspx文件：

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="FloatDiv.aspx.cs"Inherits="WebTest2008.FloatDiv"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title>浮动div</title>
<scriptsrc="js/floatDiv.js"type="text/javascript"></script>
</head>
<formid="form1"runat="server">
<divid="divFloat"style="position:absolute;width:215px;z-index:1;background:#cef">
测试！
</div>

<div>
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
testtesttest 
</div>
</form>
</html>

二：可拖动div的实现

//dragDiv.js
//实现可拖动的div
varpx=0;
varpy=0;
varbegin=false;
//是否要开启透明效果
varenableOpacity=false;//默认不允许
varmyDragDiv;
functiondown(oDiv){
myDragDiv=oDiv;
begin=true;
oDiv.style.cursor="hand";
event.srcElement.setCapture();
px=oDiv.style.pixelLeft-event.x;
py=oDiv.style.pixelTop-event.y;
}
functiondocument.onmousemove(){
if(myDragDiv!=null&&typeof(myDragDiv)!="undefined"){
if(begin){
if(enableOpacity){myDragDiv.style.filter="Alpha(opacity=30)";}//滤镜
myDragDiv.style.pixelLeft=px+event.x;
myDragDiv.style.pixelTop=py+event.y;
}
}
}
functiondocument.onmouseup(){
if(myDragDiv!=null&&typeof(myDragDiv)!="undefined"){
begin=false;
if(enableOpacity){myDragDiv.style.filter="Alpha(opacity=100)";}//滤镜
myDragDiv.style.cursor="default";
event.srcElement.releaseCapture();
myDragDiv=null;
}
}

上面的js怎么用呢？看到down函数的方式你就会猜到一些端倪，好了，看html文件吧：

<html>
<head>
<title>DragDiv</title>
<scriptsrc="js/dragDiv.js"type="text/javascript"></script>
</head>
<body>
<divid="divDrag"style="position:absolute;width:160px;height:100px;z-index:1;background:#cef">
按下鼠标拖动
</div>
</body>
</html>

对比浮动div的style，你看到相同点了吗？没错，就是position的那些事儿...
三、遮罩层(div和iframe实现)
下面两个js（myLightBoxDiv.js和myLightBoxFrame.js）介绍遮罩层的不同实现思路，本来可以整合在一起，为了条例清晰把它们分成两个js文件，它们的效果其实是一样的。
（1）div的实现方式

varisIE=(document.all)?true:false;//document.all只有ie支持此属性
varieVersion=7;//IE版本，默认为7
if(isIE){
ieVersion=parseFloat(navigator.appVersion.split("MSIE")[1]);
}
varde=getBodyObj();
functiongetBodyObj(){
return(document.documentElement)?document.documentElement:document.body;
}
functionresetCSS(elem,prop){for(variinprop){elem.style[i]=prop[i];}}
//滚动条位置
functionscrollX(){returnself.pageXOffset||de&&de.scrollLeft||document.body.scrollLeft;}
functionscrollY(){returnself.pageYOffset||de&&de.scrollTop||document.body.scrollTop;}
//可视尺寸
functionwindowW(){returnself.innerWidth||de&&de.clientWidth||document.body.clientWidth;}
functionwindowH(){returnself.innerHeight||de&&de.clientHeight||document.body.clientHeight;}
//页面尺寸（最小不小于可视尺寸）
functionpageW(){vars=document.body.scrollWidth;varc=windowW();returns>c?s:c;}
functionpageH(){vars=document.body.scrollHeight;varc=windowH();returns>c?s:c;}
//lightbox显示和隐藏
functioncreateDivOverLayer(w,h){
//内容
vartempInnerHtml="<divid=\"divOverProgress\"style='width:400px;height:250px;margin:0auto;position:absolute;top:0px;padding-top:8px;text-align:right;background-color:#fff;border:8pxsolid#8F8F8F;'title='按住鼠标可以拖动'οnmοusedοwn=\"down(this)\">";
tempInnerHtml+="<spanid=\"spanCloseLightBox\"οnclick=\"closeLightBox()\"style=\"cursor:pointer;color:Blue\">关闭 ";
tempInnerHtml+="<divstyle=\"margin-top:90px;text-align:center\"><ahref=\"#\"οnclick=\"alert('confirm')\">确定</a>  <ahref=\"#\"οnclick=\"closeLightBox()\">取消</a></div>";
tempInnerHtml+="</div>";
//建立lightbox
varover=document.createElement("div");
over.id="myLightBoxLayer";
varover2=document.createElement("div");
over2.id="myProcessLayer";
document.body.appendChild(over);
document.body.appendChild(over2);
//重设lightbox尺寸和位置
functionresetOver(){
//设定遮掩层尺寸
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"});

//设定弹出层尺寸和位置
vareh=windowH()-h;
varew=windowW()-w;
eh=eh<0?0:eh;
ew=ew<0?0:ew;
if(ieVersion!=7)
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",filter:"alpha(opacity=0)"});
else
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"});
};
resetOver();
window.onresize=resetOver;
window.onscroll=resetOver;
if(ieVersion!=7){//将所有select置为不可用
varoSelects=document.getElementsByTagName("select");
for(vari=0;i<oSelects.length;i++){
oSelects[i].disabled=true;
oSelects[i].style.visibility="hidden";
}
}
over2.innerHTML=tempInnerHtml;
}

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

上面的js里让遮罩层over2设置为浮动，下面的html可以让你测试滚动情况下的可以拖动的遮罩效果。

<html>
<head>
<title>CoverLayer</title>
<scriptsrc="js/myLightBoxDiv.js"type="text/javascript"></script>
<scriptsrc="js/dragDiv.js"type="text/javascript"></script>
</head>
<body>
<selectid="Select1">
<option>testtesttesttesttest</option>
</select>
 
<selectid="Select2"multiple="multiple">
<option>testtesttesttesttest</option>
</select>
<spanstyle="cursor:pointer;color:Blue"id="testtest"onclick="createDivOverLayer(400,400)">测试
 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
<spanstyle="cursor:pointer;color:Blue"id="Span1"onclick="createDivOverLayer(400,400)">测试
</body>
</html>

(2)IFrame实现方式
同上，复制下面代码试试看效果吧：

//myLightBoxFrame.js
varisIE=(document.all)?true:false;//document.all只有ie支持此属性
varieVersion=7;//IE版本，默认为7
if(isIE){
ieVersion=parseFloat(navigator.appVersion.split("MSIE")[1]);
}
varde=getBodyObj();
functiongetBodyObj(){
return(document.documentElement)?document.documentElement:document.body;
}
functionresetCSS(elem,prop){for(variinprop){elem.style[i]=prop[i];}}
//滚动条位置
functionscrollX(){returnself.pageXOffset||de&&de.scrollLeft||document.body.scrollLeft;}
functionscrollY(){returnself.pageYOffset||de&&de.scrollTop||document.body.scrollTop;}
//可视尺寸
functionwindowW(){returnself.innerWidth||de&&de.clientWidth||document.body.clientWidth;}
functionwindowH(){returnself.innerHeight||de&&de.clientHeight||document.body.clientHeight;}
//页面尺寸（最小不小于可视尺寸）
functionpageW(){vars=document.body.scrollWidth;varc=windowW();returns>c?s:c;}
functionpageH(){vars=document.body.scrollHeight;varc=windowH();returns>c?s:c;}
//lightbox显示和隐藏
functioncreateFrameOverLayer(w,h,href){
//内容
vartempInnerHtml="<divid=\"divProcessHead\"style='width:100%;margin:0auto;position:absolute;top:0px;padding-top:8px;text-align:right;background-color:#fff'id='overprogress'>";
tempInnerHtml+="<spanid=\"spanCloseLightBox\"οnclick=\"closeLightBox()\"style=\"cursor:pointer;color:Blue\">关闭</div>";
tempInnerHtml+="<iframescrolling='no'frameborder='0'src='"+href+"'width='100%'height='100%'></iframe>";
//建立lightbox
varover=document.createElement("div");
over.id="myLightBoxLayer";
varover2=document.createElement("div");
over2.id="myProcessLayer";
document.body.appendChild(over);
document.body.appendChild(over2);
//重设lightbox尺寸和位置
functionresetOver(){
//设定遮掩层尺寸
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"});

//设定弹出层尺寸和位置
vareh=windowH()-h;
varew=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.οnmοusedοwn="down(this)";
};
resetOver();
window.onresize=resetOver;
window.onscroll=resetOver;
if(ieVersion!=7){//将所有select置为不可用
varoSelects=document.getElementsByTagName("select");
for(vari=0;i<oSelects.length;i++){
oSelects[i].disabled=true;
}
}
over2.innerHTML=tempInnerHtml;
}

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

html代码：

//JsTest.html
<html>
<head>
<title>CoverLayer</title>
<scriptsrc="js/myLightBoxFrame.js"type="text/javascript"></script>
<scriptsrc="js/dragDiv.js"type="text/javascript"></script>
</head>
<body>
<selectid="Select1">
<option>testtesttesttesttest</option>
</select>
 
<selectid="Select2"multiple="multiple">
<option>testtesttesttesttest</option>
</select>
<spanstyle="cursor:pointer;color:Blue"id="testtest"onclick="createFrameOverLayer(400,400,'myJsTest.htm')">测试
 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
<spanstyle="cursor:pointer;color:Blue"id="Span1"onclick="createFrameOverLayer(400,400,'myJsTest.htm')">测试
</body>
</html>

//第二个html文件，myJsTest.html
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<divstyle="margin-top:80px;text-align:center">
<ahref="#"onclick="alert('confirm')">确定</a>  <ahref="#"onclick="alert('cancel')">取消</a>
</div>
</body>
</html>

注意上面的html代码里包含两个html文件，主文件是jsTest.html,iframe的src引用的是myJsTest.html文件.总结介绍结束了。^_^