最近接触一个公司，生产一块方形成品。在质检时，已标出方形中某些位置（通常为点或线的数值坐标）是次品，在销售时，都是按客户要求的尽寸对方块进行切割，为了达到不必要的浪费，想通过ASP实现，当鼠标移动到方块的某个位置，能够显示出坐标的位置，从而看到方块的尺寸大小，这样就需要获取鼠标坐标，提供一个HTML的demo，可以达到这个功能，代码如下：
JScript code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
*
{
font-family:Tahoma;
font-size:3;
text-align:left;
}
</style>
<script type="text/javascript">
var oldmouseX,oldmouseY;
var olddragX,olddragY;
var dragobject;
String.prototype.getPxNumber=function()
{
return Number(this.substr(0,this.length-2));
}
function start(evt)
{
recordposition(evt);
}
function end(evt)
{
recordposition(evt);
dragobject=null;
}
function recordposition(evt)
{
var event=window.event?window.event:evt;
dragobject=event.target?event.target:event.srcElement;
oldmouseX=event.clientX;
oldmouseY=event.clientY;
olddragX=dragobject.style.left.getPxNumber();
olddragY=dragobject.style.top.getPxNumber();
document.getElementById("start").innerHTML="oldmouseX="+oldmouseX+"px"+", oldmouseY="+oldmouseY+"px"+", olddragX="+olddragX+"px"+", olddragY="+olddragY+"px";
}
function move(evt)
{
var event=window.event?window.event:evt;
var target=event.target?event.target:event.srcElement;
if(dragobject==target)
{
dragobject.style.left=String(olddragX+event.clientX-oldmouseX)+"px";
dragobject.style.top=String(olddragY+event.clientY-oldmouseY)+"px";
document.getElementById("move").innerHTML="move.left:"+dragobject.style.left+", move.top:"+dragobject.style.top;
}
}
</script>
</head>
<body>
<div id="start"></div>
<div id="move"></div>
<div id="dragobject" onmousedown="start(event)" onmouseup="end(event)" onmousemove="move()" style="padding:30px; width:90px; CURSOR:move; left:25px; TOP:100px; HEIGHT:20px; BACKGROUND-COLOR:blue; position:absolute">
zhang jie
</div>
</body>
</html>
未经允许不得转载：聚友 » 简单的获取鼠标坐标的html demo
你的我弄好了已经
我的是 www.puxiaofeng.cn
没事下我们多交流下