我有一个图像嵌套在几个div中。图像的宽度是2000px,当浏览器的宽度设置为小于页面加载时的宽度时,我希望图像的中心与屏幕的中心对齐,并且能够滚动到左/右以查看图像的其余部分。我还需要粉红镶边的div来跟随图像,保持它们现在的位置不变(Square需要保持在英国上空,而circle需要保持在波兰上空)。
我有一个JS的小提琴下面,我有什么我到目前为止,所以当页面加载时,我希望我放在地图上的X出现在屏幕中间,然后仍然可以滚动左右,以查看地图的其余部分。我还需要图像保持为图像元素,而不是背景图像,因为我有一个允许缩放的页面功能,但我在使用背景图像时会得到不希望的结果,但为了解决这个问题,我已经删除了所有代码。

//html
    <div id="map-container">
        <div id="map-inner-container">
        <img src="http://img253.imagevenue.com/aAfkjfp01fo1i-27999/loc573/72685_vector_world_map_v2.2copy_122_573lo.jpg" style="z-index:-9999;">
        <div id="map-1" onclick="showPopup(1)"><!-- UK --></div>
        <div id="map-2" onclick="showPopup(2)"><!-- Poland --></div>
        </div>
    </div>

//css
    #map-container{
        z-index:-9000;
        width:2000px;
        height:1414px;
    }
    #map-inner-container {
        position:relative;
        top:0;
    }

JSFIDDLE公司:
http://jsfiddle.net/Lt4PW/7/
我看了很多类似的问题,并尝试了所有的解决方案,但似乎都不起作用。在添加overflow:auto时,我确实通过使图像的中心与scree的中心对齐来实现了一次接近,但无法滚动事件。
我发现的所有其他解决方案都只使用css,img的外部div上有left:50%margin-left:-1000px /*half of width*/这样的东西,但由于这样的东西对我不起作用,所以我对JavaScript/jQuery解决方案持开放态度,如果它起作用的话,也可以使用纯css。
非常感谢您的帮助,因为我不知所措!:(

最佳答案

使用jQuery可以执行以下操作:

  var windowHeight = $(window).height();
  var windowWidth = $(window).width();
  $('body').scrollTop(($('#map-container').height()/2)-(windowHeight/2));
  $('body').scrollLeft(($('#map-container').width()/2)-(windowWidth/2));

FIDDLE

09-11 00:50
查看更多