JavaScript拖动层和缩放层(完美版)
JavaScript拖动层和缩放层(完美版)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Js层拖动 - www.codefans.net</title><style>*{margin:0;padding:0;}#zhezhao{ width:100%; height:100%; background:#f00; filter:alpha(opacity:0); opacity:0; z-index:9999; position:absolute; top:0; left:0; display:none;}#div2{ width:200px; height:200px; position:relative; background:#EEEEEE; border:1px solid #f00;}#div1{ width:15px; height:15px; background:#99CC00; position:absolute; right:0px; bottom:0px; cursor:nw-resize; overflow:hidden; font-size:12px; text-align:center; line-height:15px; color:#FFFFFF; float:right; z-index:3;}#right{ width:15px; height:100%; background:#f00; float:right; position:absolute; right:0; top:0; cursor:e-resize; overflow:hidden; filter:alpha(opacity:0); opacity:0; z-index:1;}#bottom{ width:100%; height:15px; background:#f00; position:absolute; left:0; bottom:0; cursor:n-resize; overflow:hidden; filter:alpha(opacity:0); opacity:0; z-index:1;}#div2 p{ padding:10px; line-height:24px; font-size:13px; text-indent:24px; color:#996600;}#div2 h2{ width:100%; height:25px; line-height:25px; font-size:14px; background:#CC9900; color:#FFFFFF; text-indent:15px; cursor:move; overflow:hidden;}</style><script type="text/javascript">window.onload=function(){ var oDiv=document.getElementById("div1"); var oDiv2=document.getElementById("div2"); var zhezhao=document.getElementById("zhezhao"); var h2=oDiv2.getElementsByTagName("h2"); var right=document.getElementById("right"); var bottom=document.getElementById("bottom"); var mouseStart={}; var divStart={}; var rightStart={}; var bottomStart={}; //往右拽 right.onmousedown=function(ev) {var oEvent=ev||event;mouseStart.x=oEvent.clientX;mouseStart.y=oEvent.clientY;rightStart.x=right.offsetLeft;if(right.setCapture){ right.onmousemove=doDrag1; right.onmouseup=stopDrag1; right.setCapture();}else{ document.addEventListener("mousemove",doDrag1,true); document.addEventListener("mouseup",stopDrag1,true);} }; function doDrag1(ev) {var oEvent=ev||event;var l=oEvent.clientX-mouseStart.x+rightStart.x;var w=l+oDiv.offsetWidth; if(w<oDiv.offsetWidth){ w=oDiv.offsetWidth;}else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft){ w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;}oDiv2.style.width=w+"px"; }; function stopDrag1() {if(right.releaseCapture){ right.onmousemove=null; right.onmouseup=null; right.releaseCapture();}else{ document.removeEventListener("mousemove",doDrag1,true); document.removeEventListener("mouseup",stopDrag1,true);} }; //往下拽 bottom.onmousedown=function(ev) {var oEvent=ev||event;mouseStart.x=oEvent.clientX;mouseStart.y=oEvent.clientY;bottomStart.y=bottom.offsetTop;if(bottom.setCapture){ bottom.onmousemove=doDrag2; bottom.onmouseup=stopDrag2; bottom.setCapture();}else{ document.addEventListener("mousemove",doDrag2,true); document.addEventListener("mouseup",stopDrag2,true);} }; function doDrag2(ev) {var oEvent=ev||event;var t=oEvent.clientY-mouseStart.y+bottomStart.y;var h=t+oDiv.offsetHeight; if(h<oDiv.offsetHeight){ h=oDiv.offsetHeight;}else if(h>document.documentElement.clientHeight-oDiv2.offsetTop){ h=document.documentElement.clientHeight-oDiv2.offsetTop-2;} oDiv2.style.height=h+"px"; }; function stopDrag2() {if(bottom.releaseCapture){ bottom.onmousemove=null; bottom.onmouseup=null; bottom.releaseCapture();}else{ document.removeEventListener("mousemove",doDrag2,true); document.removeEventListener("mouseup",stopDrag2,true);} }; //往左右同时拽 oDiv.onmousedown=function(ev) {var oEvent=ev||event;mouseStart.x=oEvent.clientX;mouseStart.y=oEvent.clientY;divStart.x=oDiv.offsetLeft;divStart.y=oDiv.offsetTop;if(oDiv.setCapture){ oDiv.onmousemove=doDrag; oDiv.onmouseup=stopDrag; oDiv.setCapture();}else{ document.addEventListener("mousemove",doDrag,true); document.addEventListener("mouseup",stopDrag,true);}zhezhao.style.display='block'; }; function doDrag(ev) {var oEvent=ev||event;var l=oEvent.clientX-mouseStart.x+divStart.x;var t=oEvent.clientY-mouseStart.y+divStart.y; var w=l+oDiv.offsetWidth;var h=t+oDiv.offsetHeight; if(w<oDiv.offsetWidth){ w=oDiv.offsetWidth;}else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft){ w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;}if(h<oDiv.offsetHeight){ h=oDiv.offsetHeight;}else if(h>document.documentElement.clientHeight-oDiv2.offsetTop){ h=document.documentElement.clientHeight-oDiv2.offsetTop-2;} oDiv2.style.width=w+"px";oDiv2.style.height=h+"px"; }; function stopDrag() {if(oDiv.releaseCapture){ oDiv.onmousemove=null; oDiv.onmouseup=null; oDiv.releaseCapture();}else{ document.removeEventListener("mousemove",doDrag,true); document.removeEventListener("mouseup",stopDrag,true);}zhezhao.style.display='none'; };//h2完美拖拽 h2.onmousedown=function(ev) {var oEvent=ev||event;mouseStart.x=oEvent.clientX;mouseStart.y=oEvent.clientY;divStart.x=oDiv2.offsetLeft;divStart.y=oDiv2.offsetTop; if(h2.setCapture){ h2.onmousemove=doDrag3; h2.onmouseup=stopDrag3; h2.setCapture();}else{ document.addEventListener("mousemove",doDrag3,true); document.addEventListener("mouseup",stopDrag3,true);} zhezhao.style.display='block'; }; function doDrag3(ev) {var oEvent=ev||event;var l=oEvent.clientX-mouseStart.x+divStart.x;var t=oEvent.clientY-mouseStart.y+divStart.y;if(l<0){ l=0;}else if(l>document.documentElement.clientWidth-oDiv2.offsetWidth){ l=document.documentElement.clientWidth-oDiv2.offsetWidth;}if(t<0){ t=0;}else if(t>document.documentElement.clientHeight-oDiv2.offsetHeight){ t=document.documentElement.clientHeight-oDiv2.offsetHeight;}oDiv2.style.left=l+"px";oDiv2.style.top=t+"px"; }; function stopDrag3() {if(h2.releaseCapture){ h2.onmousemove=null; h2.onmouseup=null; h2.releaseCapture();}else{ document.removeEventListener("mousemove",doDrag3,true); document.removeEventListener("mouseup",stopDrag3,true);} zhezhao.style.display='none'; }};</script></head><body><div id="div2"> <div style="width:100%; height:100%; overflow:hidden;"> <h2>完美的拖拽</h2> <p>体验不错的JavaScript网页拖动，除了拖动，还可拖动放大，像Windows窗口一样被放大或缩小，只要按住层的右下角，就可以收放自如的放大或缩小。想使用的朋友，可将代码里的Js封装成类，从外部引入想必更合理些。'</p> <div id="right"></div> <div id="div1">拖</div> <div id="bottom"></div> </div></div><div id="zhezhao"></div></body></html>
页:
[1]