1

我试图在容器内创建一个 800x500 的 div，其中包含 800x500 的四个重叠 div。在初始加载时，我试图让每个重叠 div 显示 1/4，最终当您单击或将鼠标悬停在其中一个象限上时，jquery 将该象限从 400x250 扩展到 800x500 并相应地调整 z 索引，以便扩展 div位于顶部。我一开始就难住了。我设置了一个 800x500 的容器 div。在那个容器内，我放置了 4 个 400x250 div。我原以为将 800x500 图像放置在 400x250 容器中会裁剪图像，并且我会在开始时看到所有四个图像，然后我将着手进行转换。

任何帮助都会很棒。这是我一直在玩的小提琴。

或者，您可以在此处查看所有心智编译器的代码。

<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;
}
4

1 回答 1

1

我更新了你的小提琴：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;
}
于 2012-03-15T13:47:12.000 回答