1、JavaScript实现
X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
function mousePosition ( ev ) {
if ( ev.pageX || ev.pageY ) {
return { x : ev.pageX, y : ev.pageY };
}
return {
x : ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y : ev.clientY + document.body.scrollTop - document.body.clientTop
};
};
function mouseMove ( ev ) {
ev = ev || window.event;
var mousePos = mousePosition(ev);
document.getElementById('xxx').value = mousePos.x;
document.getElementById('yyy').value = mousePos.y;
}
document.onmousemove = mouseMove;
2、jQuery实现
$('#ele').click(function ( event ) {
//获取鼠标在图片上的坐标
console.log('X:' + event.offsetX + '\n Y:' + event.offsetY);
//获取元素相对于页面的坐标
console.log('X:' + $(this).offset().left + '\n Y:' + $(this).offset().top);
});
想要整理更多的碎片知识,扫码关注下面的公众号,让我们在哪里接着唠!