Question

我尝试创建一个800x500 div，容器内有四个重叠的div，分别为800x500。在初始加载时，我试图获得每个重叠div显示的1/4，最终当你单击或者鼠标悬停在其中一个象限时，jquery会将该象限从400x250扩展到800x500，并相应地调整z索引，以便扩展div在顶部。不过我在开头就难过了。我设置了一个800x500的容器div。在那个容器里面我放了4个400x250 div。我期待在400x250的容器中放置一个800x500的图像会裁剪图像，我会看到所有四个图像，然后我将继续进行转换。

任何帮助都会很棒。这是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;
}

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

用jquery显示的CSS重叠div

1 个答案: