<html>
<head>
<style type="text/css">
.DragFrame{
position:absolute;
border:1px solid #000;
overflow:hidden;
}
.header{
height:4px;
background-color:#00F;
}
.ContentNow{
font-size:0.7em;
font-family:arial;
padding:2px;
padding-top:5px;
overflow:hidden;}
.footer{
position:absolute;
bottom:-1px;
border-top:1px solid #000;
height:4px;
width:100%;
font-size:0.8em;
background-color:red;
}
</style><script type="text/javascript">
var dragObject = false;
var dragheader = false;
var dragfooter = false;
var orignalLength = 0;
function dragHeader(obj,ev)
{
dragheader = true;
dragObject = obj.parentNode;
var dragLeft = dragObject.style.left.replace('px','')/1;
e = ev;
orignalLength = e.clientX-dragLeft;
return false;
}
function dragFooter(obj)
{
dragObject = obj.parentNode;
dragfooter = true;
return false;
}
function mouseUp(e)
{
if(!dragObject)return;
dragObject = false;
dragheader = false;
dragfooter = false;
orignalLength = 0;
}
function mouseMove(e)
{
if(document.all) e = event;
if(!dragObject)return;
var dragTop;
var dragLeft;
var tmpHeight;
if( dragfooter )
{
dragTop = dragObject.style.top.replace('px','')/1;
tmpHeight = e.clientY - dragTop;
dragObject.style.height = tmpHeight + 'px';
}
if( dragheader )
{
dragTop = dragObject.style.top.replace('px','')/1;
dragLeft = dragObject.style.left.replace('px','')/1;
//if(orignalLength > e.clientX-dragLeft)
dragLeft = dragLeft+(e.clientX-dragLeft);
// else
// dragLeft = dragLeft-(e.clientX-dragLeft);
dragObject.style.top = e.clientY + 'px';
dragObject.style.left = e.clientX+ 'px';
}
}
</script></head>
<body ><div onmousemove="mouseMove(event)" onmouseup="mouseUp(event)" style="width:1000px;height:800px" >
<DIV class="DragFrame" style=" LEFT: 316px; WIDTH: 120px; TOP: 50px; HEIGHT: 103px; BACKGROUND-COLOR: #ffffff">
<DIV class="header" onmousedown="dragFooter(this)" style="CURSOR: n-resize; BOTTOM: -1px"><SPAN></SPAN></DIV>
<DIV id="resizeTest" class="footer" onmousedown="dragFooter(this)" style="CURSOR: n-resize; BOTTOM: -1px">
<SPAN></SPAN>
</DIV>
</DIV></div></body>
</html>
现在实现的是拖动下面红色条的,我想下面固定拖动上面蓝色的条。谢谢
<head>
<style type="text/css">
.DragFrame{
position:absolute;
border:1px solid #000;
overflow:hidden;
}
.header{
height:4px;
background-color:#00F;
}
.ContentNow{
font-size:0.7em;
font-family:arial;
padding:2px;
padding-top:5px;
overflow:hidden;}
.footer{
position:absolute;
bottom:-1px;
border-top:1px solid #000;
height:4px;
width:100%;
font-size:0.8em;
background-color:red;
}
</style><script type="text/javascript">
var dragObject = false;
var dragheader = false;
var dragfooter = false;
var orignalLength = 0;
function dragHeader(obj,ev)
{
dragheader = true;
dragObject = obj.parentNode;
var dragLeft = dragObject.style.left.replace('px','')/1;
e = ev;
orignalLength = e.clientX-dragLeft;
return false;
}
function dragFooter(obj)
{
dragObject = obj.parentNode;
dragfooter = true;
return false;
}
function mouseUp(e)
{
if(!dragObject)return;
dragObject = false;
dragheader = false;
dragfooter = false;
orignalLength = 0;
}
function mouseMove(e)
{
if(document.all) e = event;
if(!dragObject)return;
var dragTop;
var dragLeft;
var tmpHeight;
if( dragfooter )
{
dragTop = dragObject.style.top.replace('px','')/1;
tmpHeight = e.clientY - dragTop;
dragObject.style.height = tmpHeight + 'px';
}
if( dragheader )
{
dragTop = dragObject.style.top.replace('px','')/1;
dragLeft = dragObject.style.left.replace('px','')/1;
//if(orignalLength > e.clientX-dragLeft)
dragLeft = dragLeft+(e.clientX-dragLeft);
// else
// dragLeft = dragLeft-(e.clientX-dragLeft);
dragObject.style.top = e.clientY + 'px';
dragObject.style.left = e.clientX+ 'px';
}
}
</script></head>
<body ><div onmousemove="mouseMove(event)" onmouseup="mouseUp(event)" style="width:1000px;height:800px" >
<DIV class="DragFrame" style=" LEFT: 316px; WIDTH: 120px; TOP: 50px; HEIGHT: 103px; BACKGROUND-COLOR: #ffffff">
<DIV class="header" onmousedown="dragFooter(this)" style="CURSOR: n-resize; BOTTOM: -1px"><SPAN></SPAN></DIV>
<DIV id="resizeTest" class="footer" onmousedown="dragFooter(this)" style="CURSOR: n-resize; BOTTOM: -1px">
<SPAN></SPAN>
</DIV>
</DIV></div></body>
</html>
现在实现的是拖动下面红色条的,我想下面固定拖动上面蓝色的条。谢谢
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货