jquery动画左百分比关闭答案

【问题标题】：jquery animate left percentage offjquery动画左百分比关闭
【发布时间】：2015-05-12 22:46:11
【问题描述】：

我正在尝试在其容器内移动图像（它是地图的图片），以便在单击 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 移动的百分比时，它返回：

梅普金最高：-47.79 左：-7.88

比金斯顶部：-3.069 左：2.69

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

【问题讨论】：

标签： javascript jquery html css jquery-animate

【解决方案1】：

计算百分比？例如

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

【讨论】：

我在想这个。你认为问题可能是我在 DOM 中一直有百分比吗？换句话说，由于一切都是基于百分比的，所以它总是不同的。使地图容器基于像素会使这个窗口大小独立吗？
是的，您可以设置基于像素的大小来避免此问题。您还可以将地图设置为 100%，这也应该可以防止这个问题。这完全取决于这些事情将如何影响您的布局。不要忘记，通过媒体查询，您始终可以为不同的设备尺寸设置不同的像素宽度。
非常感谢，我会看看什么最适合我的布局。感谢您的建议。