POPSブログ

簡易SLICE-PHOTO/6

44

  Category:  jquery2012/03/05 pops 

簡易スライドタイプです、左右上下にスライドします、ドアタイプもつけました。


簡易SLICE-PHOTO-6 (簡易スライドタイプ)

pops-slicephoto06.js

スライス、サンプル表示



HTML構造を直接書きますが、残り画像はJS側スクリプトに記述します。

  • スライスしていますが、スライドしていますので、簡易SLIDE-PHOTOなのでしょうか?
    呼称は自由なのですが、、、
  • スライス数を随時、ランダムに変えられるようにしました。
  • そのほかは、簡易SLICE-PHOTO-1、簡易SLICE-PHOTO-5を参照ください。
  • テスト的なスクリプトです、なお、IE8 はキレイに動作しません。Google Chrome を利用ください。

簡単な動作の説明

説明図


基本的には簡易SLICE-PHOTO-1と余り変わりませんが、スライス数を随時変えられるようにしましたので処理位置、変数の設定の位置が変わります。
上下左右方向へのスライドが基本です。分割にはバー、ドアタイプの2種類があります。ドアは開閉です。
回転できませんが、それでもそれなりの効果はあります。表示、動作はマシンの性能が大きく関わりますので十分な注意が必要です。


簡単なスクリプト説明


途中略す

標準では
50%の確率で12分割が実行されます
50%の確率でランダムに分割されます
max_h_use を use にしますと50%の確率で「自由分割の限度」の数値がランダムに分割に使用されます
下のように8-6くらいにしますと大まかな分割主体になります

var split_h = 12;//8-16位、余り細くしないこと
var split_v = 1;//1に固定すること
var max_split_h = 6;//自由分割の限度/split_h拠り小さいこと
var max_h_use="";//use 自由分割限度を使用する

-------------------------------------------------------------
途中略す

50%の確率でランダムに分割されます

//新規分割変数
var new_split_h,new_split_v,new_split_total;
//分割の種類、標準か再分割か/split_type=0 標準
var split_type = Math.floor(Math.random() * 3);
//ドアの種類、単純バーかドアか/door_type=0ドア
var door_type = Math.floor(Math.random() * 5);//3-5

現在、標準バーの数値が多く使用される設定になっています

//標準バー分割
new_split_h=split_h;
new_split_v=split_v;

use 設定した数値を使用してランダムに分割されます

if (split_type > 1) {
	//自由分割1/通常分割数使用
	new_split_h=Math.floor(Math.random() * split_h)+1;
	//自由分割2/MAX値使用 大まかのほうが良い
	if (max_h_use == 'use') {new_split_h=Math.floor(Math.random() * max_split_h)+1;}
}

ドア分割の確率は現在33%です

if (door_type == 0) {
	//ドア分割
	new_split_v=2;
}

//total
new_split_total=new_split_h*new_split_v;

-------------------------------------------------------------

途中略す

それぞれのスライドの種類により分類して、条件分岐で、位置情報をあたえて行きます
ここでは、スライス要素の大きさの変化はさせないことにします
スライス要素の伸縮を設定しての変化をさせる場合はもっと複雑になります

//初期の位置大きさとスライド方向の設定
var pos_sx = 0;
var pos_sy = 0;
var s_w = 0;
var s_h = 0;

//split_hの中央値
center_v=(new_split_h-1)/2;
//even
var even_h = 0;

var k = 0;
for (var i=0; i < new_split_h; i++) {
	for (var j=0; j < new_split_v; j++) {

		スライス要素は、分割された位置に、CSSで固定されています
		INならば、初期位置をきめて移動します
		OUTならば、INで求めた初期位置と終了位置をすりかえれば良い訳です

		//現在値代入/OUT
		pos_sx=slicebs_pos_x[k];
		pos_sy=slicebs_pos_y[k];
		s_w=slicebs_W[k];
		s_h=slicebs_H[k];

		even_h = 0;
		if (i % 2 != 0) {even_h = 1;}

		バー状と、ドアに分類します、上下および左右に位置をふりわけます
		mvchegflag逆転であれば、反対の位置を設定
		上下方向はY位置だけ変更
		左右方向はX位置だけ変更
		つまり、スライス要素の、その位置で垂直、または水平に動くことになります

		//BAR
		if (door_type > 0) {
			//上方向
			if (chgflag == 0) {
				pos_sy=slicebs_H[k]*-1;
				//交互に逆方向
				if (even_h && mvchegflag == 1) {pos_sy=bs_H;}
			}
			//下方向
			if (chgflag == 1) {
				pos_sy=bs_H;
				if (even_h && mvchegflag == 1) {pos_sy=slicebs_H[k]*-1;}
			}
			//左右方向1
			if (chgflag == 2) {
				pos_sx=bs_W;
				if (hvflag == 0){pos_sx=bs_W;}
				if (hvflag == 1){pos_sx=slicebs_W[k]*-1;}
				if (even_h && hvflag == 2){pos_sx=slicebs_W[k]*-1;}
			}
			//強制左右両方向/3
			if (chgflag > 2) {
				pos_sx=slicebs_W[k]*-1;
				if (k > center_v) {pos_sx=bs_W;}
			}

		}

		上下ドアタイプは、ここでは左右に動かさず、上下だけにします
		左右ドアタイプの場合を追加するには、分割を別にします、ここではしません

		//DOOR
		if (door_type == 0) {
			//上下方向に分ける/左右方向には動かない
			pos_sy=slicebs_H[k]*-1;
			if (j==1) {pos_sy=bs_H;}
			//逆転フラグ
			if (mvchegflag == 1) {
				pos_sy=bs_H;
				if (j==1) {pos_sy=slicebs_H[k]*-1;}
			}
		}

		結構、割り振りして確認しながらの作業ですから手間がかかります

		変更のあった、数値を代入してINの場合だけ、CSSで移動します

		//移動大きさ保存配列
		mv_sW[k]=s_w;
		mv_sH[k]=s_h;
		mv_posX[k]=pos_sx;
		mv_posY[k]=pos_sy;

		//CSS移動
		if (slice_move_type == 'in') {
			slice_chips[k].css({'left':pos_sx,'top':pos_sy,'width':s_w,'height':s_h});
		}

		//outはcss移動なし、大きさそのまま

		k ++;
	}
}

設置方法

簡易JS記述、間違いの少ない、setTimeout の通常方式で記述しています。なお、設置するページが違えば、別画像ででも使用できま すが、画像の大きさが違えば別のCSS名で新たに作ってリンクしてください。


簡易SLICE-PHOTO-1を参照ください。【参照】簡易SLICE-PHOTO-1

簡易SLICE-PHOTO-5を参照ください。【参照】簡易SLICE-PHOTO-5


[ HTML構造を作る ]
以下のように構造を作ってください。ID は #pops_slice_photo です。


<div id="pops_slice_photo">
	<div id="slice_box">
		<div id="s_imgholder"><img src="/main/images/photo_m1.jpg" width="640" height="200" /></div>
		<div id="slice_base"></div>
		<div id="s_loading"></div>
		<div id="view_text"></div>
	</div>
</div>

注意、最初の画像を #s_imgholder に書き込んでください。また全画像はJSに登録します。


[ 使用方法 ]、JSを読み込むだけで実行します。またHEAD部分に直接記述しても実行します。
注意、関数、delay()を使用していますので、jquery1.42以降のバージョンで作動します。


読み出す場合
<link rel="stylesheet" type="text/css" href="/main/css/pops-slicephoto06.css" />
<script type="text/javascript" src="/main/js/jquery.js"></script>
<script type="text/javascript" src="/main/js/pops-slicephoto06.js"></script>

----------------------------------------------------------------

HEAD部分に直接JSを記述する場合
<script type="text/javascript">
	ここにJS部分を直接記述
</script>

JS、CSS、Loading画像

JS pops-slicephoto06.js 通常方式

同一のループを何段にも重ねていますが、勿論1つのループで処理は可能ですが、正確なdelay値をアニメで処理させるために、あえて分割しています。マシン環境により正確にdelay値を送出できるとは限りません。ActinScriptなどとは同一に出来ません。中には使用していない変数もあります。


//pops-slicephoto06.js
//setTimeout loading 通常方式
//POPS WEB KOUBOU

(function($){

	$(function(){

		var bs_W = 640;
		var bs_H = 200;
		var split_h = 12;//8-16位、余り細くしないこと
		var split_v = 1;//1に固定すること
		var max_split_h = 6;//自由分割の限度/split_h拠り小さいこと
		var max_h_use="";//use 自由分割限度を使用する

		var first_time = 12000;//スタートまでの時間、5000以上 
		var cycle_time = 8000;//サイクル 5000以上
		var speed = 600;//拡大縮小時間 400-800
		var delay_speed = 200;//delay基準時間 100-200

		//TEXT表示
		var text_use="";//use

		//画像までのパス
		var path='/main/images/';
		//画像名を登録する
		var img_urls=['photo_m1.jpg','photo_m2.jpg','photo_m3.jpg','photo_m4.jpg'];
		var list_len=img_urls.length;

		//分割補正
		if (split_v != 1) {split_v=1;}
		if (split_h <= max_split_h) {max_split_h=split_h-2;}
		//ドア補正max2倍
		var split_total = split_h*split_v;
		var max_split_total =split_total*2;

		//jQueryObjectCache
		var imgholder_elm,transition_base_elm,slicebase,cleaner_elm;
		var img_url,img_url2,loading,thumbshowbox;
		var imgPreloader;//opela

		//chash
		transition_base_elm = $('#slice_box');
		imgholder_elm = $('#slice_box #s_imgholder');
		slicebase = $('#slice_box #slice_base');
		loading = $('#slice_box #s_loading');

		var count = 0;
		var img_url = "";
		var keep_url = "";

		//slice-OBJ
		var slice_chips = [];
		//slice in
		var slicebs_pos_x = [],slicebs_pos_y = [],slicebs_W = [],slicebs_H = [];
		var slice_W = 0,slice_H = 0,slice_Wb = 0,slice_Hb = 0;

		//IN OUT
		var in_type_nm = ['in','out','in','out','in','out'];

		//移動位置配列
		var mv_posX = [];
		var mv_posY = [];
		//移動大きさ保存配列
		var mv_sW=[];
		var mv_sH=[];

		var sliceflag = 0;
		var anime_move = "";
		var box_len;
		var box_len2;
		var delayflag = 0;

		//説明用
		var split_type_nm=['stan','free','free','free','free'];
		var door_type_nm=['door','bar','bar','bar','bar'];

		//global
		var gl_roop_v = 0;
		//Even算出
		var even_v = 1;
		if (split_v % 2 != 0) {even_v = 0;}

		//------------------------------------------------

		//init
		var init = function () {

			//loading-Set
			loading.css({'width':bs_W,'height':bs_H,'display':'none'});
			//sliceBox非表示
			slicebase.css({'display':'none'});
			//Doorがあるので2倍にしている
			var roop_v = max_split_total;
			//global
			gl_roop_v = roop_v;

			//スライス要素を作る
			//make chip
			var sliceboxs="";
			for (var i=0; i < roop_v; i++) {
				sliceboxs += '<div id="'+ 'slice'+ i + '" class="slice_bk"></div>';
			}
			//append #slice_base
 			$('#slice_base').append(sliceboxs);
			//len
			box_len = $('.slice_bk').length;
			//slice chips
			for (var i=0; i < roop_v; i++) {
				slice_chips[i] = $("#slice"+i);
			}
			slicebase.find(".slice_bk").css({'display':'none'});

			//slice-set
			slice_set()

			//最初の画像をINNER画像BOX1にセット表示する
			keep_url=path+img_urls[count];
			//次ぎの画像の番号セット
			count = 1;

			//START Main-timer-set
			window.setTimeout(nextImage,first_time);

		}

		//slice-set
		function slice_set() {
			//移動している、必要なものがあれば書く
			//
		}

		//sliceImage-view関数
		function sliceImage (){

			anime_move = 'move';
			set_text("");

			//重要、前のものも残るので、要素を隠す left=bs_W でも良い
			slicebase.find(".slice_bk").css({'left':0,'top':0,'width':0,'height':0,'display':'none'});

			//delayクリア
			var delay_st=[];
			//スライス要素関連クリア
			slicebs_pos_x = [],slicebs_pos_y = [],slicebs_W = [],slicebs_H = [];
			//移動位置配列クリア
			mv_posX = [];
			mv_posY = [];
			//移動大きさ保存配列クリア
			mv_sW=[];
			mv_sH=[];

			//新規分割変数
			var new_split_h,new_split_v,new_split_total;
			//分割の種類、標準か再分割か/split_type=0 標準
			var split_type = Math.floor(Math.random() * 3);
			//ドアの種類、単純バーかドアか/door_type=0ドア
			var door_type = Math.floor(Math.random() * 5);//3-5

			//標準バー分割
			new_split_h=split_h;
			new_split_v=split_v;

			if (split_type > 1) {
				//自由分割1/通常分割数使用
				new_split_h=Math.floor(Math.random() * split_h)+1;
				//自由分割2/MAX値使用 大まかのほうが良い
				if (max_h_use == 'use') {new_split_h=Math.floor(Math.random() * max_split_h)+1;}
			}

			if (door_type == 0) {
				//ドア分割
				new_split_v=2;
			}

			//total
			new_split_total=new_split_h*new_split_v;

			//Even算出/可変なのでその都度算出
			even_v = 1;
			if (new_split_v % 2 != 0) {even_v = 0;}

			//スライス
			slice_W = Math.round(bs_W/new_split_h);//YOKO
			slice_H = Math.round(bs_H/new_split_v);//TATE
			slice_Wb = bs_W - slice_W * (new_split_h - 1);
			slice_Hb = bs_H - slice_H * (new_split_v - 1);
			var k = 0;
			for (var i=0; i < new_split_h; i++) {
				for (var j=0; j < new_split_v; j++) {
					//大きさ保存
					slicebs_W[k] = slice_W;
					if (i == new_split_h - 1) {slicebs_W[k] = slice_Wb;}
					slicebs_H[k] = slice_H;
					if (j == new_split_v - 1) {slicebs_H[k] = slice_Hb;}
					//位置保存
					slicebs_pos_x[k] = slice_W * i;
					slicebs_pos_y[k] = slice_H * j;
					k ++;
				}
			}

			//逆転フラグ/mvchegflag=1 逆転
			//逆転計算/20%
			var mvchegflag = Math.floor(Math.random() * 5);
			//多目的判定用
			var chgxyflag = Math.floor(Math.random() * 5);
			//多目的判定用2 追加 0-3
			var chgflag = Math.floor(Math.random() * 4);
			//多目的判定用3 追加 0-2
			var hvflag = Math.floor(Math.random() * 3);

			//delayed遅延させる/20%
			var delayed = Math.floor(Math.random() * 5);
			//IN OUT
			var slice_move_type = in_type_nm[Math.floor(Math.random() * in_type_nm.length)];
			//標準delay_no 0-7

			var delay_no = Math.floor(Math.random() * 7);
			//random-scale
			var random_scale=0;

			//url
			var slice_url = img_url;
			//OUTは下層画像URL取得
			if (slice_move_type == 'out') {slice_url = imgholder_elm.children("img").attr('src');}

			//BOX欄外移動
			slicebase.css({'top':0,'left':0,'width':bs_W,'height':bs_H});

			//背景画像挿入
			var k = 0;
			for (var i=0; i < new_split_h; i++) {
				for (var j=0; j < new_split_v; j++) {
					slice_chips[k].css({'left':slicebs_pos_x[k]});
					slice_chips[k].css({'top':slicebs_pos_y[k]});
					//BACKGROUND-SET url
					slice_chips[k].css({'width':slicebs_W[k],'height':slicebs_H[k],'background-image':'url('+ slice_url + ')'});
					//BACKGROUND-SET position
					slice_chips[k].css({'backgroundPosition':(slicebs_pos_x[k] * -1) + 'px ' + (slicebs_pos_y[k] * -1) + 'px'});

					k ++;
				}
			}

			//chips-display
			slicebase.find(".slice_bk").css({'display':'block'});

			if (slice_move_type == 'out') {imgholder_elm.children("img").empty().attr({'src':img_url}).css({'display':'block'});}

			//初期の位置大きさとスライド方向の設定
			var pos_sx = 0;
			var pos_sy = 0;
			var s_w = 0;
			var s_h = 0;

			//split_hの中央値
			center_v=(new_split_h-1)/2;
			//even
			var even_h = 0;

			var k = 0;
			for (var i=0; i < new_split_h; i++) {
				for (var j=0; j < new_split_v; j++) {
					
					//現在値代入/OUT
					pos_sx=slicebs_pos_x[k];
					pos_sy=slicebs_pos_y[k];
					s_w=slicebs_W[k];
					s_h=slicebs_H[k];

					even_h = 0;
					if (i % 2 != 0) {even_h = 1;}

					//BAR
					if (door_type > 0) {
						//上方向
						if (chgflag == 0) {
							pos_sy=slicebs_H[k]*-1;
							//交互に逆方向
							if (even_h && mvchegflag == 1) {pos_sy=bs_H;}
						}
						//下方向
						if (chgflag == 1) {
							pos_sy=bs_H;
							if (even_h && mvchegflag == 1) {pos_sy=slicebs_H[k]*-1;}
						}
						//左右方向1
						if (chgflag == 2) {
							pos_sx=bs_W;
							if (hvflag == 0){pos_sx=bs_W;}
							if (hvflag == 1){pos_sx=slicebs_W[k]*-1;}
							if (even_h && hvflag == 2){pos_sx=slicebs_W[k]*-1;}
						}
						//強制左右両方向/3
						if (chgflag > 2) {
							pos_sx=slicebs_W[k]*-1;
							if (k > center_v) {pos_sx=bs_W;}
						}

					}
					//DOOR
					if (door_type == 0) {
						//上下方向に分ける/左右方向には動かない
						pos_sy=slicebs_H[k]*-1;
						if (j==1) {pos_sy=bs_H;}
						//逆転フラグ
						if (mvchegflag == 1) {
							pos_sy=bs_H;
							if (j==1) {pos_sy=slicebs_H[k]*-1;}
						}
					}

					//移動大きさ保存配列
					mv_sW[k]=s_w;
					mv_sH[k]=s_h;
					mv_posX[k]=pos_sx;
					mv_posY[k]=pos_sy;

					//CSS移動
					if (slice_move_type == 'in') {
						slice_chips[k].css({'left':pos_sx,'top':pos_sy,'width':s_w,'height':s_h});
					}

					//outはcss移動なし、大きさそのまま

					k ++;
				}
			}

			//delay-SET
			//random_scaleとdelay_noで分類して設定している
			var flag3 = 1;
			var kk = 0;//方向違いカウント
			var kkk = 0;//半分でカウントダウン
			var k = 0;
			for (var i=0; i < new_split_h; i++) {
				for (var j=0; j < new_split_v; j++) {

					//縦方向にカウント
					kk = i * new_split_v + j;

					kkk=k;
					if (k > (new_split_total-1)/2) {kkk = Math.abs(new_split_total-k)-1;}

					//DOOR
					if (door_type == 0) {
						if (delay_no < 3) {delay_st[k] = k*delay_speed*1.5;}
						//上下同時
						if (delay_no == 3 || delay_no == 4) {delay_st[k] = Math.abs((i+0.5)-(new_split_h/2))*delay_speed;}
						//時間差あり
						if (delay_no > 4) {delay_st[k] = kkk*delay_speed*2;}
					}
					//BAR
					if (door_type > 0) {
						if (delay_no == 0) {delay_st[k] = kk*delay_speed;}
						if (delay_no == 1) {delay_st[k] = Math.abs(k-(new_split_total-1)/2)*delay_speed;}
						//外から
						if (delay_no == 2) {delay_st[k] = kkk*delay_speed;}
						if (delay_no > 2) {delay_st[k] = k*delay_speed;}
						
					}
					//delayed遅延
					if (delayed == 1) {
						if (flag3 < 0) {delay_st[k] +=800;}
					}

					k ++;
					flag3 *= -1;

				}
				if (even_v) {flag3 *= -1;}
			}

			//delay反転
			if (chgxyflag > 2) {
				delay_st.reverse();
			}

			var sdnm=split_type_nm[split_type]+ "." + door_type_nm[door_type];
			var text="SPLIT: ["+ new_split_h + "x" + +new_split_v + "] "+ new_split_total + " /NAME "+ sdnm + " /IN.OUT "+ slice_move_type + " /SCL " + random_scale + " /DELAY " + delay_no + " /CHGF " + chgflag + "";
			set_text(text);
			//set_text("START");

			//アニメ速度調整
			var speed_v=speed;
			//DOORタイプ
			if (door_type == 0) {speed_v = speed * 0.75;}
			//横
			if (chgflag > 1) {speed_v = speed * 1.5;}

			//BOX 0.0移動
			slicebase.css({'top':0,'left':0});
			slicebase.css({'display':'block'});

			//アニメ実行、IN OUT 共用にして、取替え用変数
			var anim_W,anim_H,anim_X,anim_Y;
			//スライスアニメカウント
			sliceflag = 0;
			var k = 0;
			for (var i=0; i < new_split_h; i++) {
				for (var j=0; j < new_split_v; j++) {

					//IN OUT 差し替え
					if (slice_move_type == 'in') {anim_W=slicebs_W[k];anim_H=slicebs_H[k];anim_Y=slicebs_pos_y[k];anim_X=slicebs_pos_x[k];}
					if (slice_move_type == 'out') {anim_W=mv_sW[k];anim_H=mv_sH[k];anim_X=mv_posX[k];anim_Y=mv_posY[k];}

					//anime/IN OUT共用
					slice_chips[k].delay(delay_st[k]).animate({'left':anim_X,'top':anim_Y,'width':anim_W,'height':anim_H},speed_v,function() {
						sliceflag ++;
						//goto slice_image_parts
						if (sliceflag == new_split_total) {slice_image_parts();}
					});
					k ++;
				}
			}

		};

		//end-anime
		function slice_image_parts() {
			sliceflag = 0;
			imgholder_elm.children("img").empty().attr({'src':img_url}).css({'display':'block'});

			slicebase.css({'left':bs_W,'display':'none'});	
			anime_move = '';

			//keep-url
			keep_url=img_url;
			//cycle-time
			setTimeout(nextImage,cycle_time);
		};

		//NEXT
		function nextImage() {
			//カウントアップ
			count++;
			if (count > list_len-1) {count = 0;}
			//imgタグに入れる、URL取得
			img_url = path+img_urls[count];
			imgload ();
		}

		//imgPreloader
		var imgload = function() {
			//loading
			loading.css({'display':'block'});
			//set-imgPreloader
			imgPreloader = new Image();
			//onload
			imgPreloader.onload = function() {
				//loading
				loading.css({'display':'none'});
				sliceImage();
			}
			//url
			imgPreloader.src = img_url;
		}

		//set-text
		function set_text(text) {
			if (text_use == 'use') {
				$('#view_text').text(text);
			}
		}

		//init start
		init();

	});

})(jQuery);

Loading画像 31x31



CSS pops-slicephoto06.css


/* pops-slicephoto06.css 日本語*/

#pops_slice_photo {
	display:block;
	position:relative;
	width:640px;
	height:200px;
	background-color:#000000;
}
#pops_slice_photo #slice_box {
	display:block;
	position:absolute;
	top:0;left:0;
	width:640px;
	height:200px;
	background-color:#000000;
	overflow:hidden;
}

#slice_box #s_imgholder {
	display:block;
	position:absolute;
	top:0;left:0;
	width:640px;
	height:200px;
	padding:0;
	margin:0;
	border-style:none;
	background-color:#000000;
}
#slice_box #s_imgholder img {
	padding:0;
	margin:0;
	border-style:none;
	text-decoration:none;
}

#slice_box #slice_base {
	display:block;
	position:absolute;
	top:0;left:0;
	overflow:hidden;
}
#slice_box #slice_base .slice_bk {
	position:absolute;
	background-position: 0 0;
	top:0;left:0;
	overflow:hidden;
}
#slice_box #s_loading {
	display: block;
	position:absolute;
	top:0;left:0;
	border:0;
	background: url("/main/images/loading.gif") no-repeat center center;
	background-color: none;/*Safari*/
}
#slice_box #view_text {
	display:block;
	position:absolute;
	top:5px;left:5px;
	width:80%;
	height:20px;
	color:#FF0000;
}

以上です。



[ この記事のURL ]


タグ:series , photo , Transition , jquery

[ 簡易SLICE-PHOTO シリーズ記事 ]

簡易SLIDESHOW/42012.03.14
簡易SLIDESHOW/32012.03.13
簡易SLIDESHOW/22012.03.12
簡易TRANSITION-PHOTO/42012.03.09
簡易SLICE-PHOTO/72012.03.05
簡易SLICE-PHOTO/62012.03.05
簡易SLICE-PHOTO/52012.03.04
簡易SLICE-PHOTO/42012.03.03
簡易SLICE-PHOTO/32012.03.02
簡易SLICE-PHOTO/22012.03.02
簡易SLICE-PHOTO/12012.03.01

 

ブログ記事一覧

年別アーカイブ一覧



[1]