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