我有一个图像嵌套在几个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