0
我有一个div容器分解成象限。每个象限都有一个图像大小的容器，但裁剪到那个象限。在鼠标悬停时，我想让象限展开以适合容器。我的挑战是将图像放在DIV中。左上角的图像很好，所有其他图像都对齐到它们所在的跨度的左上角，我需要所有图像在左上角对齐。见this fiddle它可能会更有意义看着它。范围内的图像位置
基本上所有的图像应该有相同的位置，堆叠在一起，只有一个象限基于z-index和它们所在的跨度而暴露.jquery将在mouseover上显示完整图像。
万一你没看到the fiddle here：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#containter {background: black; height:500; width:800px; padding:0px; overflow: hidden;}
#top-left {position: absolute; top:0px; left: 0px; height:250px; width:400px; padding:0px; overflow: hidden; z-index: 1; }
#top-right {position: absolute; top:0px; left:400px; height: 250px; width:400px; overflow:hidden;z-index: 2;}
#bottom-left {position: absolute; top:250px; left:0px; height:250px; width:400px; padding:0px; overflow: hidden; z-index: 3; }
#bottom-right {position: absolute; top:250px; left: 400px; height:250px; width:400px; padding:0px; overflow: hidden; z-index: 4; }
</style>
</head>
<body>
<div id="box">
<span id="top-left">
<image src="http://2.bp.blogspot.com/_Otv4_7K3yfk/TTxZykkA4cI/AAAAAAAAAcM/bQFOHrc5fyQ/s1600/Wallpapers_Nature+%25288%2529.jpg">
</span>
<span id="top-right">
<image src="http://www.adywallpapers.com/nature/260_nature_wallpapers.jpg">
</span>
<span id="bottom-right">
<image src="http://www.adywallpapers.com/nature/101_nature_wallpapers.jpg">
</span>
<span id="bottom-left">
<image src="http://www.adywallpapers.com/nature/192_nature_wallpapers.jpg">
</span>
</div>
<script>
$("#top-left").mouseover(function() {
$(this).css("width","+=400");
$(this).css("height","+=250");
$(this).css("z-index", "100");
});
$("#top-left").mouseout(function() {
$(this).css("width","-=400");
$(this).css("height","-=250");
$(this).css("z-index", "1");
});
$("#bottom-left").mouseover(function() {
$(this).css("width","+=400");
$(this).css("height","+=250");
$(this).css("z-index", "100");
});
$("#bottom-left").mouseout(function() {
$(this).css("width","-=400");
$(this).css("height","-=250");
$(this).css("z-index", "3");
});
$("#top-right").mouseover(function() {
$(this).css("width","+=400");
$(this).css("height","+=250");
$(this).css("z-index", "100");
});
$("#top-right").mouseout(function() {
$(this).css("width","-=400");
$(this).css("height","-=250");
$(this).css("z-index", "2");
});
$("#bottom-right").mouseover(function() {
$(this).css("width","+=400");
$(this).css("height","+=250");
$(this).css("z-index", "100");
});
$("#bottom-right").mouseout(function() {
$(this).css("width","-=400");
$(this).css("height","-=250");
$(this).css("z-index", "4");
});
</script>
</body>
</html>
感谢