首先onmousedown 的时候,记录第一个点
再 onmouseup 的时候,记录第二个位置
获取图片的相对位置,鼠标位置减去图片的相对位置,就是框在图片上的两个坐标。这两个都知道了,其他两个也计算得出来了吧。
再 onmouseup 的时候,记录第二个位置
获取图片的相对位置,鼠标位置减去图片的相对位置,就是框在图片上的两个坐标。这两个都知道了,其他两个也计算得出来了吧。
解决方案 »
- js中有一句正则表达式看不明白
- jquery 的remove,调用时说 is not a function
- 火狐ff中遍历某一个form下面所有的input控件,如何写这个js ?
- 模式窗口……iframe……一个讨人厌的刷新问题
- 问一下:网页刷新后定位?
- 请问大家,如何用wsh.Run执行在有空格路径的里面的执行文件
- [请教老手]如何嵌入sina新闻
- TEXT文本框内不允许输入数值外的值并且限定长度???
- 俺要做一个在WEB上实现类似于画流程图的一个东东。求可行的技术方案!
- 想找一点比较全面的文档,最好能在线更新的
- NetScape中如何使按钮获得光标,而不提交!!!
- [正则表达式]解析HTML代码得到格式化数据?
<HEAD>
<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()
{
select=false;
alert(" startPos: " + "X = " + x0 + " , " + " Y= " + y0 + "\n"
+ " EndPos: " + "X = " + event.clientX + " , " + " Y= " + event.clientY + "\n"
);
}function document.onselectstart()
{
return false;
}function document.ondrag()
{
return false;
}function Conmousemove()
{
if (select){
dd.style.display='';// 如果鼠?已?正?移?,将??置?可?。
myImgDim = getDim(document.images.MyImage);
//alert("x:" + eval(event.clientX - myImgDim.x) + ", y:" + eval(event.clientY - myImgDim.y))
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);
}
}
}function getDim(el){
for (var lx=0,ly=0;el!=null;
lx+=el.offsetLeft,ly+=el.offsetTop,el=el.offsetParent);
return {x:lx,y:ly}
}</script>
</HEAD>
<BODY>
<table>
<tr>
<td onMouseMove="Conmousemove()" onMouseDown="Conmousedown();">
<img id="MyImage" src="G:\DeskTop ShortCut\16373417.bmp">
</td>
</tr>
</table>
<table id="dd" style="position:absolute;width:0px;height:0px;z-index:99;border:1px RED Solid;display:none;">
<tr><td></td></tr>
</table>
</BODY>
</HTML>
<HEAD>
<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()
{
select=false;
myImgDim = getDim(document.images.MyImage);
alert(" startPos: " + "X = " + eval(x0-myImgDim.x) + " , " + " Y= " + eval(y0-myImgDim.x) + "\n"
+ " EndPos: " + "X = " + eval(event.clientX-myImgDim.x) + " , " + " Y= " + eval(event.clientY-myImgDim.y) + "\n"
);
}function document.onselectstart()
{
return false;
}function document.ondrag()
{
return false;
}function Conmousemove()
{
if (select){
dd.style.display='';// 如果鼠?已?正?移?,将??置?可?。
myImgDim = getDim(document.images.MyImage);
//alert("x:" + eval(event.clientX - myImgDim.x) + ", y:" + eval(event.clientY - myImgDim.y))
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);
}
}
}function getDim(el){
for (var lx=0,ly=0;el!=null;
lx+=el.offsetLeft,ly+=el.offsetTop,el=el.offsetParent);
return {x:lx,y:ly}
}</script>
</HEAD>
<BODY>
<table style="left: 500px;border:1px BLACK Solid;">
<tr>
<td onMouseMove="Conmousemove()" onMouseDown="Conmousedown();">
<img id="MyImage" src="G:\DeskTop ShortCut\16373417.bmp">
</td>
</tr>
</table>
<table id="dd" style="position:absolute;width:0px;height:0px;z-index:99;border:1px RED Solid;display:none;">
<tr><td></td></tr>
</table>
</BODY>
</HTML>你鼠标点击的时候,先不要放,画好方框后再释放。程序写得比较差,反应有点问题,不过是可以实现的。现在稍微修正了一下。你看到开始于结束坐标一样,是因为释放得太快了。或者你鼠标放到画的方框里面去了。