Javascript jquery动画左百分比关闭_Javascript_Jquery_Html_Css_Jquery Animate

Javascript jquery动画左百分比关闭

javascript jquery html css

Javascript jquery动画左百分比关闭,javascript,jquery,html,css,jquery-animate,Javascript,Jquery,Html,Css,Jquery Animate,我试图将一个图像（它是一张地图的图片）移动到它的容器中，这样当单击div时，图像的特定部分（一个城市）位于它的容器的中心。我有这个工作，但图像向左移动的百分比小于我指定的百分比，而top工作正常 map是图像容器，map img是图像，对不起，我的名字不好 CSS HTML 当我使用警报获取map img移动的百分比时，它返回：梅普金顶部：-47.79 左：-7.88 比金斯顶部：-3.069 左：2.69 由于10.8的73%是7.88，我知道#map容器的百分比是罪魁祸首，但我不知道如

我试图将一个图像（它是一张地图的图片）移动到它的容器中，这样当单击div时，图像的特定部分（一个城市）位于它的容器的中心。我有这个工作，但图像向左移动的百分比小于我指定的百分比，而top工作正常

map是图像容器，map img是图像，对不起，我的名字不好

CSS

HTML

当我使用警报获取map img移动的百分比时，它返回：

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

比金斯顶部：-3.069 左：2.69

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

计算出百分比？e、 g

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

我在想这个。你认为问题可能是我在DOM上一直有百分比吗？换句话说，因为每件事都是基于百分比的，所以它总是不同的。使贴图容器基于像素是否会使此窗口大小独立？是的，可以设置基于像素的大小以避免此问题。您还可以将映射设置为100%，这也可以防止此问题。这完全取决于这些东西将如何影响你的布局。不要忘记，通过媒体查询，您可以为不同的设备大小设置不同的宽度（以像素为单位）。非常感谢，我将看到什么最适合我的布局。我很感激你的建议。

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

$(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").animate({top: '-47.8%', left: '-'+Math.round((10.8/73)*100)+'%'});