基于点击坐标的中心 div答案

【问题标题】：Center div based on click coords基于点击坐标的中心 div
【发布时间】：2014-12-31 23:27:06
【问题描述】：

我尝试搜索此内容，但我看到的大多数答案只是将某些内容放在 div 中。我要做的是单击图像上的某个位置并将我单击的区域居中。

我在“视口”中有一个视口 div 和一个图像 div。（溢出：隐藏）。我能够在第一次似乎可以工作的地方写一些东西，但是当我第二次单击时，它没有得到除非我刷新，否则它是正确的。

HTML：

<div id="viewport">
    <div id="garage-layout"></div>
</div>

JavaScript：

$("#garage-layout").click(function (e) {
    posX = e.pageX - $(this).offset().left;
    posY = e.pageY - $(this).offset().top;

    vP = $("#viewport");
    vX = e.pageX - vP.offset().left;
    vY = e.pageY - vP.offset().top;
    vW = (vP.width() / 2) - vX;
    vH = (vP.height() / 2) - vY;

    console.log("vy:" + vY + " vx:" + vX + " vW:" + vW + "vH" + vH);
    $(this).animate({
        top: vH,
        left: vW
    }, 1500);
})

这是我得到的：http://jsfiddle.net/86j20Lsb/1/

非常感谢！！

【问题讨论】：

请您再解释一下。 #garage-layout 的中心应该正好放在用户点击的地方，对吧？
所以车库布局将比视口更大。我想要实现的是，如果用户单击该图像上的某个点（在视口内），那么被点击的点将被移动到视口的中心。
啊，我刚刚想通了：vW = (vP.width()/2) - posX; vH = (vP.height()/2) - 位置；我减去了错误的东西。

标签： jquery html centering

【解决方案1】：

这里是解决方案Working Fiddle：
下面是JS、CSS、HTML在下面

$(document).on("click", "#garage-layout", function (e) {
    var v = $("#viewport"),
        p = v.offset(),
        el = $(this);
    $(this).animate({
        /*To postion el in viewport center*/
        top: p.top - parseInt(v.css("marginTop"), 10) + Math.abs((v.height() - el.height()) / 2),
        left: p.left - parseInt(v.css("marginLeft"), 10) + Math.abs((v.width() - el.width())) / 2

        /*To place el center to cursor position.*/
        //top: e.pageY - p.top - el.height() / 2,
        //left: e.pageX - p.left - el.width() / 2
    }, 400);
});

#garage-layout {
  position: relative;
  width: 200px;
  height: 150px;
  background: url(http://www.freephotosbank.com/photographers/photos1/29/med_ap104s3823.jpg);
  background-repeat: repeat;
}
#viewport {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 0 auto;
  border: 5px solid green;
  margin-top: 10px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="viewport">
  <div id="garage-layout"></div>
</div>

【讨论】：

谢谢，这正是我一直在寻找的东西，但我正在寻找该图像的点击位置并将其移动到视口 div 的中心。我在下面粘贴了jsfiddle。非常感谢！
很抱歉错过了这一点，从您的 Qn 语句（单击图像上的某处并将我单击的区域居中），我知道您正在寻找放置单击的元素中心应该在点击的位置。我现在正在更新答案。

【解决方案2】：

我减去了错误的变量。

vW = (vP.width()/2) -  posX;
vH = (vP.height()/2) - posY;

http://jsfiddle.net/86j20Lsb/4/

谢谢大家！

【讨论】：

我相信你的问题还没有按照小提琴解决