如想要取得下面div中图片的相对位置坐标就可以使用下面的代码：
<script>
$(document).ready(function(){
$("#imgId").click(function(e) {
var obj = $("#imgId");
var offset = obj.offset();
//alert(offset.left+"--------"+offset.top);
var ol = offset.left;
var os = offset.top;
//alert(ol+'---'+os);
var xx = e.originalEvent.x || e.originalEvent.layerX || 0;
var yy = e.originalEvent.y || e.originalEvent.layerY || 0;
alert("图片相对横坐标"+(xx-ol));
alert("图片相对纵坐标"+(yy-os));
//var right = offset.left+obj.width();//宽
//var down = offset.top+obj.height();//高
});
});
</script>
<div id= "imgId">
<img src="http://img1.gtimg.com/6/652/65217/6521708_980x1200_0.jpg" />
</div>
对于非jquery的环境可以用原生的js实现。搞了一上午，哈哈
<script>
function mouseMove(ev){
Ev= ev || window.event;
var mousePos = mouseCoords(ev);
document.getElementById("xi").value = mousePos.x;
document.getElementById("yi").value = mousePos.y;
}
function mouseCoords(ev)
{
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return{
x:ev.clientX + document.getElementById("imgId").scrollLeft - document.getElementById("imgId").clientLeft,
y:ev.clientY + document.getElementById("imgId").scrollTop - document.getElementById("imgId").clientTop
};
}
document.onmousemove = mouseMove;
</script>
<body>
鼠标X轴:
<input id="xi" type=text>
鼠标Y轴:
<input id="yi" type=text>
</body>
转播
