定番
新着
履歴

jQuery カードをめくる表現のサンプル

サンプル
コード

クリックで画像をめくる

サンプル
コード

自動でめくる

© 2024 kipure
Top



<style>

#image1{position:absolute; z-index:6; cursor:pointer; width:150px;height:100px;background-image: url("/img/site/bg.png");}
#image2{ position:absolute; z-index:5; cursor:pointer;}

.demo_stage{height: 100px;}

</style>

<script>
$(document).ready(function(){

//画像データ取得
var margin = $("#image1").width()/2;
var width = 150;
var height = 100;


//初期(裏面に隠す)
$("#image2").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});

$("#image1").click(function(){
	$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:200});
	window.setTimeout(function() {
		$("#image2").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:200});
	},200);
});

$("#image2").click(function(){
	$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:200});
	window.setTimeout(function() {
		$("#image1").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:200});
	},200);
});

});
</script>



<h2>クリックで画像をめくる</h2>
<div class="demo_stage">
    <img id="image1" width="150" src="/image/common/1px.gif" />
    <img id="image2" width="150" src="/image/sample/cat/001.jpg" />
</div>




<style>
	
.image_f{ z-index:3;  height:90px;background-image: url("/img/site/bg.png");}
.image_b{ z-index:2;  height:90px;}

.card_item     {position :relative;float:left;margin:0 10px 10px 0; width:130px;height:90px;float:left;}
.card_item img {position :absolute;border:0px;}


</style>


<script>
$(document).ready(function(){

//画像データ取得
var margin = $("#image1a").width()/2;
var width = $("#image1a").width();
var height = $("#image1a").height();

//初期(裏面に隠す)
$(".image_b").css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});

//始動! 3秒
//要リファクタリング
window.setTimeout(function() {
	$("#image1a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:200});
	window.setTimeout(function() {
		$("#image1b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:200});
	},200);
},1000+300*1);

    
window.setTimeout(function() {
	$("#image2a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:200});
	window.setTimeout(function() {
		$("#image2b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:200});
	},200);
},1000+300*2);

    
window.setTimeout(function() {
	$("#image3a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:200});
	window.setTimeout(function() {
		$("#image3b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:200});
	},200);
},1000+300*3);

    
window.setTimeout(function() {
	$("#image4a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:200});
	window.setTimeout(function() {
		$("#image4b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:200});
	},200);
},1000+300*4);

    
window.setTimeout(function() {
	$("#image5a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:200});
	window.setTimeout(function() {
		$("#image5b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:200});
	},200);
},1000+300*5);


});
</script>


<h2>自動でめくる</h2>

<div class="c">
<div class="pd10">

<div class="card_item">
  <img id="image1a" class="image_f" width="130"  src="/image/common/1px.gif" />
  <img id="image1b" class="image_b" width="130"  src="/image/sample/cat/001.jpg" />
</div>
<div class="card_item">
  <img id="image2a" class="image_f" width="130"  src="/image/common/1px.gif" />
  <img id="image2b" class="image_b" width="130"  src="/image/sample/cat/002.jpg" />
</div>
<div class="card_item">
  <img id="image3a" class="image_f" width="130"  src="/image/common/1px.gif" />
  <img id="image3b" class="image_b" width="130"  src="/image/sample/cat/003.jpg" />
  </div>
<div class="card_item">
  <img id="image4a" class="image_f" width="130"  src="/image/common/1px.gif" />
  <img id="image4b" class="image_b" width="130"  src="/image/sample/cat/004.jpg" />
</div>
<div class="card_item">
  <img id="image5a" class="image_f" width="130"  src="/image/common/1px.gif" />
  <img id="image5b" class="image_b" width="130"  src="/image/sample/cat/005.jpg" />
</div>

</div>
</div>