获取鼠标在图片对象上的位置

本文介绍了一个使用jQuery实现的鼠标位置追踪功能。通过自定义函数getMousePosition获取鼠标坐标,并利用jQuery的mousemove事件实时更新显示在页面上的输入框中。此示例展示了如何结合原生JavaScript与jQuery处理鼠标事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Mouse Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function getMousePosition(e){
var x = 0, y = 0;
var e = e || window.event;
if (e.pageX || e.pageY) {
x = e.pageX;
y = e.pageY;
} else if (e.clientX || e.clientY) {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return { 'x': x, 'y': y };
}

$(document).ready(function(){
$('#mouse_test').mousemove(function(e){
pos = getMousePosition(e);
var mouseX = pos.x;
var mouseY = pos.y;
$('#x').attr("value",mouseX);
$('#y').attr("value",mouseY);


});
});
</script>
</head>
<body>
<input type="text" id="x" />
<input type="text" id="y" />
<img src="test.jpg" id="mouse_test" align="left">
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值