Перекрывающиеся div-ы CSS раскрыты с помощью jquery - PullRequest
Новая
       12

Перекрывающиеся div-ы CSS раскрыты с помощью jquery

1 голос
/ 15 марта 2012

Я пытался создать 800x500 div с четырьмя перекрывающимися div внутри контейнера, которые имеют размер 800x500.При первоначальной загрузке я пытаюсь получить 1/4 от каждого перекрывающегося отображения div и, в конечном итоге, когда вы щелкаете или, возможно, наводите курсор на один из квадрантов, jquery расширяет этот квадрант с 400x250 до 800x500 и соответственно корректирует индекс z, чтобы расширенный divна вершине.Я в тупике с самого начала, хотя.Я установил контейнер размером 800x500.Внутри этого контейнера я поместил 4 400x250 дел.Я ожидал, что при размещении изображения 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;
}

1 Ответ

1 голос
/ 15 марта 2012

Я обновил вашу скрипку: 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;
}
...