java弹窗可以拖动放大,Js可拖拽放大的层拖动特效实现方法

本文实例讲述了Js可拖拽放大的层拖动特效实现方法。分享给大家供大家参考。具体实现方法如下：

Js实现层拖动效果，还可以拖拽放大

*{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;

}

window.onload=function()

{

var oDiv=document.getElementById("div1");

var oDiv2=document.getElementById("div2");

var zhezhao=document.getElementById("zhezhao");

var h2=oDiv2.getElementsByTagName("h2")[0];

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

{

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

{

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

{

w=oDiv.offsetWidth;

}

else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)

{

w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;

}

if(h

{

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';

}

};

完美的拖拽

体验不错的JavaScript网页拖动，除了拖动，还可拖动放大，像Windows窗口一样被放大或缩小，只要按住层的右下角，就可以收放自如的放大或缩小。想使用的朋友，可将代码里的Js封装成类，从外部引入想必更合理些。'

拖

希望本文所述对大家的javascript程序设计有所帮助。