我给一个例子你
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;
}
}
稍做改动就可以用了
这只是简单的应用
我这还有复杂更多的
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;
}
}
稍做改动就可以用了
这只是简单的应用
我这还有复杂更多的
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>