网络编程 发布日期：2025/11/13 浏览次数：1
本文实例讲述了jQuery实现右下角可缩放大小的层。分享给大家供大家参考，具体如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>大小可缩放层测试</title>
<script type = "text/javascript" src="/UploadFiles/2021-04-02/jquery-1.7.2.js">
函数封装后：
function resize(div){
div.mousemove(function(e){
var e = e || window.event;
var posx = e.clientX;
var posy = e.clientY;
var l = div.offset().left;
var t = div.offset().top;
var h = div.height();
var w = div.width();
var ol = l+w-10;
var or = l+w+10;
var ot = t+h-10;
var ob = t+h+10;
$(this).css("cursor","");
if(posx>ol && posx<or && posy >ot && posy<ob){
$(this).css("cursor","nw-resize");
}
});
div.mousedown(function(e){
var e = e || window.event;
var posx = e.clientX;
var posy = e.clientY;
var l = div.offset().left;
var t = div.offset().top;
var h = div.height();
var w = div.width();
var ol = l+w-10;
var or = l+w+10;
var ot = t+h-10;
var ob = t+h+10;
if(posx>=ol && posx<=or && posy >=ot && posy<=ob){
document.onmousemove = function(e){
var e = e || window.event;
var currX = e.clientX;
var currY = 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程序设计有所帮助。