У меня есть контейнер div, разбитый на квадранты. Каждый квадрант имеет изображение размером с контейнер, но обрезается до этого квадранта. При наведении мыши я хочу, чтобы квадрант расширялся, чтобы соответствовать контейнеру. Моя задача - позиционирование изображений с помощью DIV. Верхнее левое изображение в порядке, все остальные изображения выравниваются в левом верхнем углу диапазона, в котором они находятся, и мне нужно, чтобы все изображения выравнивались в левом верхнем углу. См. this fiddle, это может иметь больше смысла, глядя на него.позиция изображения в пределах диапазона
В общем, все изображения должны иметь одинаковое положение, располагаться друг над другом ровно друг с другом, только один квадрант, открытый на основе индекса z и в котором они находятся. Jquery покажет полное изображение при наведении курсора мыши.
Только в случае, если вы не видели 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>
Благодаря