jsp div层左右拖动鼠标改变其大小,遇到其他div覆盖？？？
2个回答
展开全部
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<style type="text/css">
#move_helper
{
position:fixed;
left:0;
top:0;
background:#000;
-moz-opacity:0.0;
opacity:0.0;
filter:Alpha(Opacity=0);
width:100%;
height:100%;
z-index:-1;
}
.resize
{
width:100px;
height:100px;
position:fixed;
left:100px;
top:100px;
position:100px;
background-color:#CCC;
border:1px solid #999;
z-index:10000;
}
.lt, .ct, .rt, .lc, .rc, .lb, .cb, .rb
{
position:absolute;
left:0;
top:0;
width:4px;
height:4px;
}
.lc, .rc
{
height:92px;
top:4px;
}
.cb, .ct
{
left:4px;
width:92px;
}
.rt, .rc, .rb
{
right:0;
left:auto;
}
.lb, .cb, .rb
{
top:auto;
bottom:0;
}
.lt
{
cursor:nw-resize;
}
.ct, .cb
{
cursor:n-resize;
}
.rt
{
cursor:ne-resize;
}
.lc, .rc
{
cursor:w-resize;
}
.lb
{
cursor:ne-resize;
}
.rb
{
cursor:nw-resize;
}
</style>
<script type="text/javascript">
var currentMousePoint = { x: 0, y: 0 };
var currentMoveType = "";
function moveClick(type, e) {
$("#move_helper").css("z-index", 99999999);
currentMousePoint = {
x: e.clientX,
y: e.clientY
};
currentMoveType = type;
}
function moveWindow(e) {
if (currentMoveType === "") {
return;
}
var window = $("#window");
var windowWidth = window.width();
var windowHeight = window.height();
var windowOffset = window.offset();
var diffMouseX = e.clientX - currentMousePoint.x;
var diffMouseY = e.clientY - currentMousePoint.y;
switch (currentMoveType) {
case "lt":
window.width(windowWidth - diffMouseX).height(windowHeight - diffMouseY).css({ "left": (windowOffset.left + diffMouseX) + "px", top: (windowOffset.top + diffMouseY) + "px" });
window.find(".lc").height(windowHeight - diffMouseY - 8);
window.find(".rc").height(windowHeight - diffMouseY - 8);
window.find(".ct").width(windowWidth - diffMouseX - 8);
window.find(".cb").width(windowWidth - diffMouseX - 8);
break;
case "lc":
window.width(windowWidth - diffMouseX).css({ "left": (windowOffset.left + diffMouseX) + "px" });
window.find(".ct").width(windowWidth - diffMouseX - 8);
window.find(".cb").width(windowWidth - diffMouseX - 8);
break;
case "lb":
window.width(windowWidth - diffMouseX).height(windowHeight + diffMouseY).css({ "left": (windowOffset.left + diffMouseX) + "px" });
window.find(".lc").height(windowHeight + diffMouseY - 8);
window.find(".rc").height(windowHeight + diffMouseY - 8);
window.find(".ct").width(windowWidth - diffMouseX - 8);
window.find(".cb").width(windowWidth - diffMouseX - 8);
break;
case "ct":
window.height(windowHeight - diffMouseY).css({ top: (windowOffset.top + diffMouseY) + "px" });
window.find(".lc").height(windowHeight - diffMouseY - 8);
window.find(".rc").height(windowHeight - diffMouseY - 8);
break;
case "rt":
window.width(windowWidth + diffMouseX).height(windowHeight - diffMouseY).css({ top: (windowOffset.top + diffMouseY) + "px" });
window.find(".lc").height(windowHeight - diffMouseY - 8);
window.find(".rc").height(windowHeight - diffMouseY - 8);
window.find(".ct").width(windowWidth + diffMouseX - 8);
window.find(".cb").width(windowWidth + diffMouseX - 8);
break;
case "rc":
window.width(windowWidth + diffMouseX);
window.find(".ct").width(windowWidth + diffMouseX - 8);
window.find(".cb").width(windowWidth + diffMouseX - 8);
break;
case "rb":
window.width(windowWidth + diffMouseX).height(windowHeight + diffMouseY);
window.find(".lc").height(windowHeight + diffMouseY - 8);
window.find(".rc").height(windowHeight + diffMouseY - 8);
window.find(".ct").width(windowWidth + diffMouseX - 8);
window.find(".cb").width(windowWidth + diffMouseX - 8);
break;
case "cb":
window.height(windowHeight + diffMouseY);
window.find(".lc").height(windowHeight + diffMouseY - 8);
window.find(".rc").height(windowHeight + diffMouseY - 8);
break;
}
currentMousePoint.x = e.clientX;
currentMousePoint.y = e.clientY;
}
function moveUp() {
currentMoveType = "";
$("#move_helper").css("z-index", -1);
}
</script>
</head>
<body>
<div id="move_helper" onmousemove="moveWindow(event)" onmouseup="moveUp()"></div>
<div class="resize" id="window">
<div class="lt" onmousedown="moveClick('lt', event)"></div>
<div class="ct" onmousedown="moveClick('ct', event)"></div>
<div class="rt" onmousedown="moveClick('rt', event)"></div>
<div class="lc" onmousedown="moveClick('lc', event)"></div>
<div class="rc" onmousedown="moveClick('rc', event)"></div>
<div class="lb" onmousedown="moveClick('lb', event)"></div>
<div class="cb" onmousedown="moveClick('cb', event)"></div>
<div class="rb" onmousedown="moveClick('rb', event)"></div>
<div>移动鼠标到四周可改变该DIV大小</div>
</div>
</body>
</html>
花了十分钟写的代码，没有仔细测试，在IE8和Chrome测试通过。
如有不懂的地方可以继续追问。
该地方引用了jQuery库，请自行更改相应的jQuery路径。
最后希望能采纳一下下。。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
