CSSがオーバーラップするdivがjqueryで公開されました

800x500のコンテナ内に4つのオーバーラップするdivを持つ800x500のdivを作成しようとしました。最初の負荷では、各重複するdiv表示の1/4を得ようとしています。最終的にクリックするか、または象限の1つ上にマウスを置くと、jQueryはその象限を400x250から800x500に展開し、一番上にあります。私は最初に困っています。私は800x500コンテナdivを設定しました。そのコンテナの中に私は400x250の4つのdivを配置しました。 800x500の画像を400x250のコンテナに配置するとイメージが切り抜かれ、4つがすべて表示され、変換に取り掛かることになると私は予想していました。CSSがオーバーラップするdivがjqueryで公開されました

助けがあれば助かります。ここには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; 
}

出典

2012-03-15 rd42

私はあなたのフィドルを更新：

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-15 13:47:12

のKa-チン：http://jsfiddle.net/qz8rK/2/

私はこのようなあなたのCSSを変更！サラにありがとう。 divをアニメーション化して、適切に表示するようにします。 – rd42

ようこそ。 –

これは奇妙なことです。私がフィドルの外でfirefoxでコードを実行すると、右上のdivが左上のものであり、右上のものではありません。 – rd42

CSSがオーバーラップするdivがjqueryで公開されました

答えて

関連する問題