我正在尝试在其容器内移动图像(它的 map 图片)，以便在单击 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 容器的百分比是罪魁祸首，但我不知道如何解决这个问题。
最佳答案
计算百分比？例如
$("#map-img").animate({top: '-47.8%', left: '-'+Math.round((10.8/73)*100)+'%'});
关于javascript - jquery animate 左百分比关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30202716/