怎么让一个层在图片上可控制大小可移动?

我这儿收藏了一点代码，虽说不能完全实现你的要求，但应该对你有帮助。<html><style>
  DIV {cursor: hand}
</style><body style="font-family: verdana">
<H2>Simple Drag and Resize Example</h2>
<h4>Use alt-click to multi-select</h4><input type=button value="Moving, click to resize"
  onclick="toggleMoveResize(this); return false"><div moveable=true style="position: absolute;
                   top: 150px; left: 100px;
                   width: 100px; height: 100px;
                   background-color: red;
                     border: solid 2px black">
Click and drag me
</div><div moveable=true style="position: absolute;
                   top: 150px; left: 250px;
                   width: 100px; height: 100px;
                   background-color: blue;
                     border: solid 2px black">
Click and drag me
</div><script language="JavaScript">
var activeElements = new Array();
var activeElementCount = 0;var lTop, lLeft;
var doMove = true;
var doResize = false;function toggleMoveResize(e) {
  if (doMove) {
    doMove = false;
    doResize = true;
    e.value = "Resizing, Click to Move";
  } else {
    doMove = true;
    doResize = false;
    e.value = "Moving, Click to Resize";
  }
}function mousedown() {
  var mp;  mp = findMoveable(window.event.srcElement);  if (!window.event.altKey) {
     for (i=0; i<activeElementCount; i++) {
        if (activeElements[i] != mp) {
          activeElements[i].style.borderWidth = "2px";
        }
     }
     if (mp) {
       activeElements[0] = mp;
       activeElementCount = 1;
       mp.style.borderWidth = "4px";
     } else {
       activeElementCount = 0;
     }
  } else {
     if (mp) {
       if (mp.style.borderWidth != "4px") {
         activeElements[activeElementCount] = mp;
         activeElementCount++;
         mp.style.borderWidth = "4px";
       }
     }
  }  window.status = activeElementCount;  lLeft = window.event.x;
  lTop = window.event.y;
}document.onmousedown = mousedown;function mousemove() {
  var i, dLeft, dTop;  if (window.event.button == 1) {    sx = window.event.x;
    sy = window.event.y;    dLeft = sx - lLeft;
    dTop = sy - lTop;    for (i=0; i<activeElementCount; i++) {
      if (doMove)
        moveElement(activeElements[i], dLeft, dTop);
      if (doResize)
        resizeElement(activeElements[i], dLeft, dTop);
    }    lLeft = sx;
    lTop = sy;    return false;
  }}function moveElement(mp, dLeft, dTop) {
    var e
    e = mp;
    e.style.posTop += dTop;
    e.style.posLeft += dLeft;
}function resizeElement(mp, dLeft, dTop) {
    var e;
    e = mp;
    e.style.posHeight += dTop;
    e.style.posWidth += dLeft;
}function findMoveable(e) {
  if (e.moveable == 'true')
    return e;  if (e.tagName == "BODY")
    return null;  return findMoveable(e.parentElement);
}function findDefinedMoveable(e) {
  if ((e.moveable == 'true') || (e.moveable == 'false'))
    return e;  if (e.tagName == "BODY")
    return null;  return findDefinedMoveable(e.parentElement);
}function rfalse() {
  return false;
}document.onmousemove = mousemove;
document.onselectstart = rfalse;</script></body></html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Document </TITLE>
<style type="text/css">
body{
padding : 0px ;
margin : 0px;
background-color : #999999 ;}
.DivMain {
position : absolute ;
text-align : center ;
overflow : hidden ;
}
.DivMenu {
position : absolute ;
text-align : left ;
overflow : hidden ;
}
.ImgMain {
position : absolute ;
overflow : hidden ;
border : 0px ;
}
.TBMain {
background-color : #CCCCCC ;
padding : 0px ;
border : 0px ;
z-index : 99 ;
line-height : 18px ;

}
.TBMenu {
background-color : #FFCCCC ;
padding : 0px ;
border : 0px ;
z-index : 99 ;
color: #000000 ;

}
.HrScroll {
margin : 0px;
background-color : #FFFFFF ;
padding : 0px ;
border : 0px ;
z-index : 99 ;
color : #000000 ;
border-spacing : 0px;
width : 160px ;
height : 10px ;
}
</style><SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD><BODY oncontextmenu="fnContextMenu()">
<form name="fmImgZoom">
<TABLE id="tbMain" class="TBMain">
<TR>
<TD>
<input type="button" name="ZoomIn" value="ZoomIn" onclick="fnZoomIn()" disabled>
<input type="button" name="ZoomOut" value="ZoomOut" onclick="fnZoomOut()" disabled>
<input type="button" name="Original" value="Original" onclick="setOriginal()" disabled>
<input type="button" name="FitScreen" value="FitScreen" onclick="setFitScreen()" disabled>
<input type="button" name="btnView" value="hide/view" onclick="setDisplay()" disabled>
<input id="btnImgInfo" size="50" disabled>
</TD>
</TR>
</TABLE>
<div id="divMain" class="DivMain" onmousedown="fnDivMouseDown()">
<img src="22.jpg" id="imgMain" class="imgMain" onload="setInit(this)" onmousedown="fnMouseDown(this)" onmousemove="fnMouseMove()" onmouseup="fnMouseUp()" ></div>
<div id="divMenu" class="DivMenu" style="visibility:hidden"" onmousedown="fnMouseDown(this)" onmousemove="fnMouseMove()" onmouseup="fnMouseUp()" >
<TABLE class="TBMenu">
<TR>
<TD>10%</TD>
<TD><button id="HrScroll" class="HrScroll"><hr noshade></button> </TD>
<TD>1600%</TD>
</TR>
</TABLE>
</div>
<DIV ID="DivFlag" STYLE="position:absolute;visibility:hidden;width:1px;height:10px;z-index:99"  onmousedown="fnSlipMouseDown(this)" onmousemove="fnSlipMouseMove()" onmouseup="fnSlipMouseUp()" onmouseover="this.style.cursor ='hand'" onmouseout="this.style.cursor=''">↑</DIV>
</form>
</BODY>
</HTML>
to fantiny(乐于助人的菜鸟回归) 你的代码怎么看不到效果？
上面的代码需要设置正确的图片路径<html>
<head>
<title> 鼠標取框 </title>
<script language="JavaScript">
var x0;
var y0;
var select=false;function Conmousedown()
{
    x0=document.body.scrollLeft+event.clientX;// 鼠?起始横坐?
    y0=document.body.scrollTop+event.clientY;// 鼠?起始?坐?
    select=true;
}function document.onmouseup()
{
//document.all.img1.click();
    select=false;
}function document.onselectstart()
{
    return false;
}function document.ondrag()
{
    return false;
}function Conmousemove()
{
   if (select)
    {
        dd.style.display='';// 如果鼠?已?正?移?，将??置?可?。
        if(document.body.scrollLeft+event.clientX-x0>0) // 从左向右
        {
            dd.style.left=x0;
            dd.style.width=document.body.scrollLeft+event.clientX-x0-2;
        }
        else // 从右向左
        {
            dd.style.left=document.body.scrollLeft+event.clientX;
            dd.style.width=x0-(document.body.scrollLeft+event.clientX);
        }
        if (document.body.scrollTop+event.clientY-y0>0)// 从上向下
        {
            dd.style.top=y0;
            dd.style.height=document.body.scrollTop+event.clientY-y0;
        }
        else// 从下向上
        {
            dd.style.top=document.body.scrollTop+event.clientY;
            dd.style.height=y0-(document.body.scrollTop+event.clientY);
        }
    }
}
</script>
</head>
<body>
<form name="form1">
<table>
<tr>
<td onMouseMove="javascript:Conmousemove()" onMouseDown="JavaScript:Conmousedown();">
<input type="image" name="img1" id="img1" src="22.jpg" onclick="return false;">
</td>
</tr>
</table>

<div id="dd" style="position:absolute; width:0px; height:0px; z-index:99; border:1px RED Solid; display:none;"><div>
</form>
</body>
</html>
<html>
   <head>
    <title> dtksh </title>
    <script>
       
    </script>
    </head>
    <body>
       <div id="bobo"
       style="visibility:hidden;position:absolute;top:20;left:15;
              width:190;height:35;background-color:rgb(62,174,128);
              filter:alpha(opacity=60)">
       </div>
       <div id="sway"
                style="visibility:hidden;color:rgb(177,63,174);position:absolute;top:20;
              width:190;height:100;margin-top:5;margin-left:5;">
         <p style="font-family:bailey;font-size:14pt;font-weight:bold;text-align:center">
              Sports is wonderful!
         </p>
       </div>

<p> <img src="ss07049.jpg"
                 onmouseover="caption()"
                 onmouseout="caption()"> </p>
<P class="p2" style="color:red">请把您的鼠标移动到图片上，然后再把鼠标从图片上挪开。</p>
     </body>
</html>
你看看这个对你有用吗
已经解决了，不使用以上格位的方法。使用了mop上面的做法。