javascript - 如何使用jquery在div标签中的某处找到一个位置

Question

另请查看附件图片以进行说明。我有一个 div 容器，我想使用 jquery 或 javascript 或两者在该 div 容器中的某个位置找到一个位置。所附图像显示了一切。请帮忙。

更新

我想找到这个位置的原因是我想将容器动画到那个点并最终消失。其次，我也想在另一侧找到位置，以便我可以从该位置为容器设置动画。

第二次更新

换句话说，我们如何找到两条线的交点？

Answer 1

鉴于您需要在 div 中找到两条线之间的交点，您的标记可能如下所示：

<div id="container" style="position:absolute; width: 100%; height: 200px;">
  <div style="width: 2px; height: 100%; left: 20%; position:absolute; background-color: red; top: 0;"></div>
  <div style="height: 2px; width: 100%; left: 0; position:absolute; background-color: blue; top: 25%;"></div>
</div>​

使用 jQuery，您可以像这样找到交叉点的坐标：

var x = $('#container div:first').position().left;
var y = $('#container div:last').position().top;
console.log(x,y);

x 和 y 是相对于容器元素的像素坐标。

http://jsfiddle.net/sAsmj/

Answer 2

你可以用这个找到指针位置，试试看

$(document).ready(function(){

    $("div#container").on("mousemove", function(e){
    var self = $(this);
    var dx = e.pageX;
    var dy = e.pageY;

    var x = dx - self.offset().left ;
    var y = dy - self.offset().top ;

    console.log(x);
    console.log(y);
    });
});

Answer 3

我没有看到图像，但是如果您正在寻找位置，理想情况下是插入符号位置，您可以使用 jquery 插件http://plugins.jquery.com/project/jCaret

Answer 4

如果你想要鼠标的 X，Y，你可以阅读这个问题：

使用 jQuery 获取鼠标单击图像的 X/Y 坐标

这是基于的问题的摘录，img但您可以为您的容器更改它：

$(document).ready(function() {
  $('img').click(function(e) {
    var offset = $(this).offset();
    alert(e.clientX - offset.left);
    alert(e.clientY - offset.top);
  });
});