如想要取得下面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>
相关推荐
### 使用jQuery获取页面元素坐标值的示例 通过上述方法，我们可以获取页面上元素的位置信息，并且可以利用这些信息进行进一步的操作。比如，根据元素位置动态调整其他元素位置、计算元素之间的距离、定位元素到特定...
在网页开发过程中，经常需要获取页面元素的坐标位置，以便实现特定的功能，如弹窗定位、元素拖拽等。jQuery 提供了一系列方法来方便地获取这些坐标值。本文将详细介绍如何使用 jQuery 来获取元素相对于窗口以及滚动...
需要注意的是，由于不同浏览器对事件对象的属性命名可能有所不同，这里使用了兼容性处理，确保在多种浏览器环境下都能正确获取坐标值。 ### 原生JavaScript获取鼠标坐标 #### 工作原理 原生JavaScript获取鼠标...
总结来说，通过jQuery的offset()方法，我们可以很容易地获取到页面元素相对于文档的坐标位置，这对于进行页面元素定位和交互设计是非常有帮助的。在实际应用中，开发者可以根据需要对获取到的坐标值进行各种操作，以...
松开鼠标后，这个矩形框将固定在图片上，同时提供了一种方式来获取和展示选择区域的坐标值。该插件是基于jQuery构建的，因此它可以轻松地与其他jQuery库和代码集成，为开发者提供了极大的便利。 **主要特性** 1. *...
3. **CSS样式和定位**：为了让按钮悬浮在右侧，我们需要使用CSS的`position`属性设置为`fixed`或`absolute`，并调整`right`、`top`等坐标值使其保持在屏幕边缘。弹出的对话框可能还需要考虑`z-index`来确保其位于...
用户双击页面元素时触发该事件。可用于编辑或查看详细信息等场景。 ```javascript $("selector").dblclick(function(){ // 双击后的处理逻辑 }); ``` #### 3. `onMouseDown`：按下鼠标键事件 鼠标键被按下时触发。...
其次，获取鼠标当前的X和Y坐标可以通过绑定鼠标移动事件，并在事件触发时获取当前鼠标的坐标值，并将其展示在页面的指定元素中。这常用于鼠标追踪或者用户交互分析中。 再来，判断一个图片是否已经完全加载可以通过...
2. jcrop插件能够获取到所选择的裁剪区域的四个关键坐标值：x轴坐标、y轴坐标、宽度和高度。 3. 这些坐标和尺寸信息会被作为参数传递给后端，通常是在一个表单提交的过程中。 4. 在后端，根据前端传递的坐标和尺寸...
然后，用户可以拖拽裁剪框，并通过ImgAreaSelect插件的API获取裁剪区域的坐标值，再将这些坐标值显示在页面上的文本框中。 需要注意的是，本文档中提供的代码示例和步骤仅供参考，实际应用时可能需要根据具体需求...
使用`event.clientX`和`event.clientY`可以获取更标准的坐标值。 8. **关于frame**：跨框架的交互在不同浏览器中可能需要不同的处理方式，例如`parent`、`top`等属性的使用。 9. **在FF中，自己定义的属性必须通过...
// 在元素中显示当前X和Y轴坐标值 $('p').html("XAxis:" + e.pageX + "|YAxis" + e.pageY); }); }); ``` 7. 检测当前鼠标的坐标 最后，如果需要在任何时间点检测鼠标的当前坐标，可以使用类似的方法来获取： ```...
4. 鼠标坐标显示：描述中提到的“鼠标坐标显示”可能是指当鼠标在div上移动时，实时显示鼠标的坐标值。这可以通过监听`mousemove`事件并使用`event.clientX`和`event.clientY`获取鼠标坐标，然后将其显示在div内或...
- 假设XML文件中坐标信息以属性形式存在，如`，可以通过`e.Attribute("x").Value`和`e.Attribute("y").Value`获取坐标值。 - 可以将坐标值转换为自定义的坐标类，便于处理和展示。 4. **将数据传递到Web界面**： ...
3. **坐标拾取**：用户可以点击地图上的任意位置，组件会自动记录并显示坐标值，便于开发者获取选定位置的信息。 4. **多层地图选择**：如果需要，可以设置多个层级的地图选择，如省份、城市、区县等，以实现更精细...
然后，我们利用jQuery的`$(document).ready()`函数，在页面加载完成后执行以下操作： 1. 遍历所有的`<area>`元素，为每个元素添加鼠标悬停事件处理。 2. 当鼠标进入某个区域时，计算提示层的位置（基于`coords`属性...
- **准备数据**：数据通常以数组的形式表示，每个元素包含x和y坐标值。 - **创建容器**：在HTML中设置一个div作为图表的容器。 - **初始化图表**：使用jQuery选择器选择容器，然后调用$.plot()方法来绘制图表。 ...