jquery 动画左侧百分比关闭

Question

我正在尝试在其容器内移动图像（它是地图的图片），以便在单击 div 时图像的特定部分（城市）位于其容器的中心.我有这个工作，但图像向左移动的百分比小于我指定的百分比，而顶部工作正常。

map是图片容器，map-img是图片，不好的名字不好意思。

CSS

html, body {
    height: 100%;
    width: 100%;
}
div.scroll {
    position:absolute;
    overflow-y: scroll;
    height: 100%;
    width: 27%;
    position: relative;
    float: right;
}
div.scroll ul{
    list-style-type: none;
}
#map {
    float:left;
    position: absolute;
    height: 100%;
    width: 73%;
    overflow: hidden;
}
#map-img {
    position: relative;
}

HTML

<body>
<div id="map">
    <img id="map-img" src="images/1842map.png" width="1800" height="2338"/>

</div>

<div class="scroll">
    <ul>
        <!-- Define photos here -->
        <li><img class="tooltipper" id="mepkin" title="Mepkin Plantation" src="images/img1.jpg"/></li>
        <li><a href="mepkin-plantation.html"><p class="image-title">Mepkin Plantation</p></a></li>
        <li><img class="tooltipper" id="biggins" title="Biggins Church" src="images/img2.jpg"/></li>
        <li><p class="image-title">Biggins Church</p></li>            
    </ul>
</div>

JQUERY

$(document).ready(function(){ 
    $(".tooltipper").click(function(){
        if ($(this).attr('id')==='mepkin'){
            $("#map-img").animate({top: '-47.8%', left: '-10.8%'});   
        }else if ($(this).attr('id')==='biggins'){
            $("#map-img").animate({top: '3.07%', left: '3.70%'});   

    });
    $("#getalertbutton").click(function(){
        var position = $('#map-img').position();
        var percentLeft = position.left/$(window).width() * 100;
        var percentTop = position.top/$(window).height() *100;
        alert("top: "+percentTop+"   "+"left: "+percentLeft);
    }
});

当我使用警报获取 map-img 移动它的百分比时 returns:

梅普金顶部：-47.79 左：-7.88

比金斯顶部：-3.069 left:2.69

因为 10.8 的 73% 是 7.88 我知道 #map 容器的百分比是罪魁祸首，但我不知道如何解决这个问题。

Answer 1

算出百分比？例如

 $("#map-img").animate({top: '-47.8%', left: '-'+Math.round((10.8/73)*100)+'%'});

jquery 动画左侧百分比关闭

jquery animate left percentage off

javascript

jquery

html

css

jquery-animate