jQuery实现右下角可缩放大小的层完整实例
本文实例讲述了jQuery实现右下角可缩放大小的层。分享给大家供大家参考，具体如下：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>大小可缩放层测试</title>
<scripttype="text/javascript"src="jquery-1.7.2.js"></script>
<styletype="text/css">
#fa{
border:1pxsolidblue;
overflow:auto;
width:400px;
height:400px;
}
#main{
margin:0;
padding:0;
width:300px;
height:280px;
border:1pxsolidred;
}
</style>
<scripttype="text/javascript">
$(function(){
vardiv=getObj("main");
div.onmousemove=function(e){
vare=e||window.event;
varposx=e.clientX;
varposy=e.clientY;
varl=div.offsetLeft;
vart=div.offsetTop;
varh=div.clientHeight;
varw=div.clientWidth;
varol=l+w-10;
varor=l+w+10;
varot=t+h-10;
varob=t+h+10;
this.style.cursor="";
if(posx>ol&&posx<or&&posy>ot&&posy<ob){
div.style.cursor="nw-resize";
}
}
div.onmousedown=function(e){
vare=e||window.event;
varinitX=e.clientX;
varinitY=e.clientY;
varl=div.offsetLeft;
vart=div.offsetTop;
varh=div.clientHeight;
varw=div.clientWidth;
varol=l+w-10;
varor=l+w+10;
varot=t+h-10;
varob=t+h+10;
if(initX>ol&&initX<or&&initY>ot&&initY<ob){
document.onmousemove=function(evt){
vare=evt||window.event;
varcurrX=e.clientX;
varcurrY=e.clientY;
div.style.width=w+(currX-initX)+"px";
div.style.height=h+(currY-initY)+"px";
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
}
});
functiongetObj(id){
returndocument.getElementById(id);
}
</script>
</head>
<body>
<divid="fa">
<divid="main"></div>
</div>
</body>
</html>
函数封装后：
functionresize(div){
div.mousemove(function(e){
vare=e||window.event;
varposx=e.clientX;
varposy=e.clientY;
varl=div.offset().left;
vart=div.offset().top;
varh=div.height();
varw=div.width();
varol=l+w-10;
varor=l+w+10;
varot=t+h-10;
varob=t+h+10;
$(this).css("cursor","");
if(posx>ol&&posx<or&&posy>ot&&posy<ob){
$(this).css("cursor","nw-resize");
}
});
div.mousedown(function(e){
vare=e||window.event;
varposx=e.clientX;
varposy=e.clientY;
varl=div.offset().left;
vart=div.offset().top;
varh=div.height();
varw=div.width();
varol=l+w-10;
varor=l+w+10;
varot=t+h-10;
varob=t+h+10;
if(posx>=ol&&posx<=or&&posy>=ot&&posy<=ob){
document.onmousemove=function(e){
vare=e||window.event;
varcurrX=e.clientX;
varcurrY=e.clientY;
div.width(w+(currX-posx));
div.height(h+(currY-posy));
}
$(document).mouseup(function(){
document.onmousemove=null;
});
}
});
}
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。