javascript实现鼠标拖动改变层大小的方法
本文实例讲述了javascript实现鼠标拖动改变层大小的方法。分享给大家供大家参考。具体实现方法如下：
<html>
<head>
<title>拖动改变层的大小</title>
<metacontent="text/html;charset=gb2312"http-equiv="Content-Type">
<style>{
box-sizing:border-box;moz-box-sizing:border-box
}
#testDiv{background-color:buttonface;background-repeat:repeat;
background-attachment:scroll;color:#3969A5;height:300px;
left:30px;overflow:hidden;width:500;z-index:2;
border:2pxoutsetwhite;margin:0px;padding:2px;
background-position:0%50%}
body{font-family:Verdana;font-size:9pt}
#innerNice{background-color:white;background-repeat:repeat;
background-attachment:
scroll;color:#3969A5;height:100%;overflow:auto;
width:100%;border:2pxinsetwhite;padding:8px;
background-position:0%50%}
</style>
<SCRIPTlanguage=javascript>
vartheobject=null;
functionresizeObject(){
this.el=null;//pointertotheobject
this.dir="";//typeofcurrentresize(n,s,e,w,ne,nw,se,sw)
this.grabx=null;//Someusefulvalues
this.graby=null;
this.width=null;
this.height=null;
this.left=null;
this.top=null;
}
functiongetDirection(el){
varxPos,yPos,offset,dir;
dir="";
xPos=window.event.offsetX;
yPos=window.event.offsetY;
offset=8;//Thedistancefromtheedgeinpixels
if(yPos<offset)dir+="n";
elseif(yPos>el.offsetHeight-offset)dir+="s";
if(xPos<offset)dir+="w";
elseif(xPos>el.offsetWidth-offset)dir+="e";
returndir;
}
functiondoDown(){
varel=getReal(event.srcElement,"className","resizeMe");
if(el==null){
theobject=null;
return;
}
dir=getDirection(el);
if(dir=="")return;
theobject=newresizeObject();
theobject.el=el;
theobject.dir=dir;
theobject.grabx=window.event.clientX;
theobject.graby=window.event.clientY;
theobject.width=el.offsetWidth;
theobject.height=el.offsetHeight;
theobject.left=el.offsetLeft;
theobject.top=el.offsetTop;
window.event.returnValue=false;
window.event.cancelBubble=true;
}
functiondoUp(){
if(theobject!=null){
theobject=null;
}
}
functiondoMove(){
varel,xPos,yPos,str,xMin,yMin;
xMin=8;//Thesmallestwidthpossible
yMin=8;//height
el=getReal(event.srcElement,"className","resizeMe");
if(el.className=="resizeMe"){
str=getDirection(el);
//Fixthecursor
if(str=="")str="default";
elsestr+="-resize";
el.style.cursor=str;
}
//Draggingstartshere
if(theobject!=null){
if(dir.indexOf("e")!=-1)
theobject.el.style.width=Math.max(xMin,theobject.width+window.event.clientX-theobject.grabx)+"px";
if(dir.indexOf("s")!=-1)
theobject.el.style.height=Math.max(yMin,theobject.height+window.event.clientY-theobject.graby)+"px";
if(dir.indexOf("w")!=-1){
theobject.el.style.left=Math.min(theobject.left+window.event.clientX-theobject.grabx,theobject.left+theobject.width-xMin)+"px";
theobject.el.style.width=Math.max(xMin,theobject.width-window.event.clientX+theobject.grabx)+"px";
}
if(dir.indexOf("n")!=-1){
theobject.el.style.top=Math.min(theobject.top+window.event.clientY-theobject.graby,theobject.top+theobject.height-yMin)+"px";
theobject.el.style.height=Math.max(yMin,theobject.height-window.event.clientY+theobject.graby)+"px";
}
window.event.returnValue=false;
window.event.cancelBubble=true;
}
}
functiongetReal(el,type,value){
temp=el;
while((temp!=null)&&(temp.tagName!="BODY")){
if(eval("temp."+type)==value){
el=temp;
returnel;
}
temp=temp.parentElement;
}
returnel;
}
document.onmousedown=doDown;
document.onmouseup=doUp;
document.onmousemove=doMove;
</SCRIPT>
</head>
<body>
<divclass="resizeMe"id="testDiv">
<divid="innerNice">
<palign="center"></p>
<palign="center">
请在边框处拖动鼠标</p>
<p></p>
<p></p>
<p></p>
</div>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。