我给一个例子你
HTML:
<html>
<script>
function document.onmousemove(){return false;}  
</script>
<head>
<script src="aaa.js"  type="text/javascript"></script>
</head> 
  <body topmargin="0" leftmargin="0">   
  
  <div style="background:#66CCCC; position:relative" id="parent" >
  <img style="cursor:crosshair"  width="416" height="584.625" src="20080606.bmp"   onmousedown="drags()" onmousemove="drag()" onmouseup="drage()"/>
</div>   
  <input   id=inp   size="20" /> <input id="testL" type="text" size="30" />
  </body>    
    
  </html>JS:
var begin;
var end; 
var div1;var flag1 = false;function AbsolutePosition(ax, ay) {
    this.ax = ax;
    this.ay = ay;
}
function getAbsolutePosition() {
     
    var ax =event.x;
    var ay =event.y;
    return new AbsolutePosition(ax, ay);
}
  function drags()   
  
  {
  
        flag1=true;
        begin=getAbsolutePosition();
        div1=document.createElement("<div>");
      var mainDIV=document.getElementById("parent");
mainDIV.appendChild(div1);  
  }  
  function   drage()   
  {   
     flag1=false;
      }   
  function   drag()  
 
  {
   if(flag1){
   end=getAbsolutePosition();
           div1.style.width=Math.abs(end.ax-begin.ax);
div1.style.height=Math.abs(end.ay-begin.ay);
div1.style.position='absolute';
div1.style.border='#FF0000 1px solid';
div1.style.left=(begin.ax>=end.ax)?end.ax:begin.ax;
div1.style.top=(begin.ay>=end.ay)?end.ay:begin.ay;
}
                   

  } 
稍做改动就可以用了
这只是简单的应用
我这还有复杂更多的

解决方案 »

  1.   


    x1:<input type=text id=x1 value=100><br> 
    y1:<input type=text id=y1 value=100><br> 
    x2:<input type=text id=x2 value=200><br> 
    y2:<input type=text id=y2 value=200><br> 
    <input type=button value=Draw onclick=Line(x1.value,y1.value,x2.value,y2.value)> 
    <div id=Line1 style="position:absolute;left:0;top:0;color:red;font-size:8px"> 
    </div> 
    <script> 
    function DrawLine(x,y,LineLength,LineStyle) 

    var s=""; 
    if(LineStyle=='h')s = '<hr color=red width='+ LineLength + '>'; 
    else for(var i=0;i<LineLength-2;i++ )s += "|<br>"; 
    //document.body.innerHTML ='<div id=Line1 style="position:absolute;left:0;top:0;color:red;font-size:8px"></div>'; 
    with(Line1) 

    innerHTML +=s;; 
    style.pixelLeft=x; 
    style.pixelTop=y; 


    function Line(x1,y1,x2,y2) 

    DrawLine(x1,y1,(y2-y1)/8,'v'); 
    DrawLine(x1,y2,(x2-x1),'h'); 

    </script>