Question

我试着搜索这个，但我看到的大多数答案只是将某些东西放在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/

非常感谢!!

Answer 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>

Answer 2

我正在减去错误的变量。

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

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

谢谢，y＆＃39;所有！

中心div基于点击坐标

2 个答案: