JQuery取得页面元素的坐标值
来源:互联网 发布:it认证培训机构 编辑:程序博客网 时间:2024/04/26 05:47
JQuery取得页面元素的坐标值
- 博客分类:
- 前端技术
如想要取得下面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如何获得页面元素的坐标值
- jquery取得父页面元素
- jquery取得元素集的val值
- js 获取页面元素的坐标值
- jquery 父页面取得iframe子页面中的元素
- 用JS取得页面上所有元素的值
- jquery取得select元素的值及文本
- iframe中取得父页面的元素,父页面取得子页面的元素
- 【转载】jquery取得iframe元素的方法
- JQuery获取页面ID元素的值
- jquery获取当前元素的坐标
- jquery获取当前元素的坐标
- js/jquery关于元素坐标的总结
- jQuery获取HTML元素的坐标
- jquery中怎么取得鼠标所在的坐标
- 获取一个页面元素在页面上的坐标位置
- 【图像算法】彩色图像分割专题八:基于MeanShift的彩色分割
- Selenium code
- Property Animation Part III(属性动画 第三部分)
- [JS] new操作符
- ModelSim仿真步骤
- JQuery取得页面元素的坐标值
- 文件上传后缀名与文件类型对照表
- yum install libxml2.so.2 zlib 出错
- 希尔排序实现
- Intellij IDEA14 手动热部署
- ehcache memcache redis 三大缓存男高音
- 毕业一年了
- Git 的origin和master分析
- copy