JQuery取得页面元素的坐标值_H5之家 - 中国HTML5教程资源分享第一站

JQuery取得页面元素的坐标值博客分类：

前端技术

如想要取得下面div中图片的相对位置坐标就可以使用下面的代码：

$(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>

对于非jquery的环境可以用原生的js实现。搞了一上午，哈哈

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轴:

鼠标Y轴:

</body>

0
顶

6
踩

分享到：

Spring爆远程代码执行漏洞（含EXP） | PowerDesigner 修改mysql数据库引擎

发表评论

您还没有登录,请您登录后再发表评论