Question

I am trying to move an image (its a picture of a map) inside its container so a specific part of the image(a city) is in the center of its container when a div is clicked. I have this working but the percentage that the image moves to the left is less than what I specify while top works fine.

map is the image container and map-img is the image, bad names I am sorry.

CSS

int main()
{
    char* var[999];
    string s = "1234";

    var[0] = new char[4 + 1];
    strcpy(var[0], s.c_str());

    delete [] var[0];
    return 0;
}

HTML

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

JQUERY

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

When I use the alert to get the percentage that map-img has moved it returns:

Mepkin top: -47.79 left: -7.88

Biggins top:-3.069 left:2.69

Since 73% of 10.8 is 7.88 I know that the percentage of the #map container is the culprit, but I do not know what to do to fix this problem.

Answer 1

算出百分比？ e.g。

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

jquery animate left percentage off

1 个答案: