我试图创建一个 800x500 的 div，容器内有四个重叠的 div，尺寸为 800x500。在初始加载时，我试图让每个重叠的 div 显示 1/4，最终当您单击或将鼠标悬停在其中一个象限上时，jquery 会将该象限从 400x250 扩展到 800x500，并相应地调整 z 索引，以便扩展的 div在上面。虽然一开始我很困惑。我设置了一个 800x500 的容器 div。在该容器内，我放置了 4 个 400x250 div。我原以为将 800x500 的图像放入 400x250 的容器中会裁剪图像，我会在开始时看到所有四个图像，然后我将开始进行转换。
任何帮助都会很棒。这是 fiddle I've been playing with .
或者你可以在这里查看代码，供所有脑力编译器使用。
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function () {
$(this).effect("scale", { percent: 300, direction: 'both' }, 1000);
});
});
</script>
</head>
<body>
<div class="container">
<div class="top-left">
<image src="http://kpbs.media.clients.ellingtoncms.com/img/photos/2010/11/12/nature-wolverines-snow_tx700.jpg?8e0a8887e886a6ff6e13ee030987b3616fc57cd3">
</div>
<div class="top-right">
<image src="http://www.adywallpapers.com/nature/260_nature_wallpapers.jpg">
</div>
<div class="bottom-right">
<image src="images/http://www.adywallpapers.com/nature/101_nature_wallpapers.jpg">
</div>
<div class="bottom-left">
<image src="http://www.adywallpapers.com/nature/192_nature_wallpapers.jpg">
</div>
</div>
</body>
</html>
CSS
body {
background-color:#000;
}
#container {
position: absolute;
width: 800px;
height: 500px;
}
.bottom-right {
position:absolute;
top:0px;
left: 0px;
background-color:yellow;
z-index:-1;
width: 400px;
height: 250px;
}
.top-right{
top:0px;
left: 0px;
background-color:white;
z-index:-2;
width: 400px;
height: 250px;
}
.bottom-left {
position:absolute;
top:0px;
left: 0px;
background-color:blue;
z-index:-3;
width: 400px;
height: 250px;
}
.top-left{
position:absolute;
top:0px;
left:0px;
background-color:black;
z-index:-4;
width: 400px;
height: 250px;
}
最佳答案
我更新了你的 fiddle :http://jsfiddle.net/qz8rK/2/
我像这样更改了你的 CSS:
body {
background-color:#000;
}
.container {
position: absolute;
width: 800px;
height: 600px;
}
.container div {
width: 400px;
height: 250px;
overflow: hidden;
}
.bottom-right {
position:absolute;
top:250px;
left: 400px;
background-color:yellow;
z-index:-1;
}
.top-right{
top:0px;
left: 400px;
background-color:white;
z-index:-2;
}
.bottom-left {
position:absolute;
top:250px;
left: 0px;
background-color:blue;
z-index:-3;
}
.top-left{
position:absolute;
top:0px;
left:0px;
background-color:black;
z-index:-4;
}
关于jquery - 用 jquery 显示 CSS 重叠 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9720776/