POPSブログ

jQueryで画像分割表示のパターンを作る

194

  Category:  jquery2013/01/17 pops 

jQueryで、画像を分割して、delay()を利用して表示パターンを作り、エフェクト処理を行ってみます。便利なようにdelay()用の複数の「標準的なパターン」を作成する。Chromeの処理が早くなったせいか以外と軽快です。

 

jQueryで画像分割表示のパターンを作る

「表示パターン」「標準的なパターン」等は便宜的に当方が付けた名称であり、実際にはdelay()を利用して表示を変える時間の「計算式」である。Flashにも応用できる。元々はFlashで作成したものをjQueryに取り込んだものです。
縦横複数分割用の「表示パターン」を20組ほどまとめてある。
分割は原則、升目状に 5x5分割 9x9分割 など奇数値で分割した場合にあうように最適化してあるが、分割が合わなくともそれなりの効果はあるので便利である。


画像分割を変化して表示する(標準的なパターン使用) サンプル


注意、多少重くなりますので、マシン性能が良くない場合は、Chrome でご覧ください。


Example

エフェクト中はボタンを押しても無効です。画像をロード出来ない場合「Loading画像」を「クリック」すれば解除されます。


  • PHOTO1
  • PHOTO2
  • PHOTO3
  • PHOTO4

現在の分割数、IN OUT の区別、パターン番号、反転状況、が表示されます。(パターン逆転の場合あり)


 

パターンの説明


JS

パターン使用の前準備

以下の変数が必要です(変数名変更可)。判定値、patternflag が true の場合に有効となります。事前にパターン番号 pattern_no を指定しますと delay_pt に「計算値」がはいります。
「計算値」はJSを動かすには値が小さいため、50-200位の値を乗じて使用します。(値は画像の大きさ、マシン環境に応じて違いあり)

時間は使用者のページなどの状況、実際の動作の感想、マシン性能などにより、適正と思われる値を設定する。


以下の変数が事前に設定しておく

//分割の設定
var split_h=9;//横分割数
var split_v=5;//縦分割数
var split_total=split_h*split_v;//分割合計

//delay値の保存容器
var delay_pt=[];

//パターン使用パターン有効100%
var pattern_no=0;
var patternflag=true;
pattern_no=Math.floor(Math.random()*22) || 0;

k kk はループのカウント

パターンのJS部分

Flash用に作ったパターンであるが、javascript でも使用できる。エラーが出ないよう switch文 を利用(仮に番号が間違っていても default が実行されるので安心だ)。三角関数でも出来るがこの方が簡単だと思うし実用に耐える。

注意、反転などしているので、アクション開始まで時間がかかるものもある。


			var sh=split_h-1;
			var sv=split_v-1;
			var center_no=split_total/2-1;

			if (patternflag) {
				var k=0;
				var kk=0;
				for (var i=0; i < split_h; i++) {
					for (var j=0; j < split_v; j++) {
						kk = j * split_h + i;
						switch(pattern_no){
							case 0:
								delay_pt[k]=Math.abs(i-(sh/2))+Math.abs(j-(sv/2));
							break;
							case 1:
								delay_pt[k]=k*0.2;
							break;
							case 2:
								delay_pt[k]=Math.abs(i+0.5-sh/2)+j*0.01;
							break;
							case 3:
								delay_pt[k]=Math.abs(i-j*split_h/split_v);
								//delay_pt[k]=Math.abs(i-j);
							break;
							case 4:
								delay_pt[k]=(j+i)/4+2*i;
							break;
							case 5:
								//delay_pt[k]=2;
								delay_pt[k]=(i+j)*0.1;
							break;
							case 6:
								delay_pt[k]=Math.abs(sv-j)+Math.abs(sh-i);
							break;
							case 7:
								delay_pt[k]= 2+Math.abs(sh-i);
							break;
							case 8:
								delay_pt[k]=(Math.abs(Math.abs(i-sh/2)-sh)+Math.abs(Math.abs(j-sv/2)-sv))*0.75;
							break;
							case 9:
								delay_pt[k]=Math.abs(i-sh/2)+j*0.01;
							break;
							case 10:
								delay_pt[k]=(split_h*split_v-kk)/2;
							break;
							case 11:
								delay_pt[k]=kk/2;
							break;
							case 12:
								delay_pt[k]=(2+j)+(Math.abs(Math.abs(i-sh/2)-sh));
							break;
							case 13:
								delay_pt[k]=Math.floor(Math.random()*10)+1;
							break;
							case 14:
								delay_pt[k]=Math.abs(k-(split_h*split_v)/2)/2;
							break;
							case 15:
								delay_pt[k]=Math.abs(k/2-j)/2;
							break;
							case 16:
								delay_pt[k]=Math.abs(i-(sh/2))-Math.abs(j-(sv/2));
							break;
							case 17:
								delay_pt[k]=Math.abs(j*split_h/split_v-Math.abs(i-sh));
							break;
							case 18:
								delay_pt[k]=Math.abs(j+Math.abs(i-sh));
							break;
							case 19:
								delay_pt[k]=Math.abs(i+Math.abs(j-sv));
							break;
							case 20:
								delay_pt[k]=2+ Math.abs(sv-j)+(Math.abs(Math.abs(i-sh/2)-sh));
							break;
							default:
								delay_pt[k]=(i+j)*0.75;
							}

						k ++;
					}
				}

			}

JS名、クラス名など修正したい場合は、html js css 共に該当部分を修正ください。自由な名前で設定できます。


パターンのJS No.5 についての補足説明

パターンのJS No.5 (case 5)は全部同時に実行するモードであるが、delay_pt[k]=2 を実行すれば、要素が中心補正などされている場合(縦横拡大縮小なるもの)は有効であるが、縦横の大きさが変化しない場合は、パッと瞬時に画像が変わるだけである。分割の意味が無い。
そのため対角に delay_pt[k]=(i+j)*0.1 極短時間で表示させるようにしている。設定状況があうなら delay_pt[k]=2 でも良い。(delay値を変化させないので、2 の数値は何でも良い、全て同時とはdelay値が無いことと同等)


または、条件を変えて、下部のdelay処理で、


パターン使用ではないdelay処理を行う

if (!patternflag) {
	if (実行させる条件) {delay_pt[k]=2;}
}

などと、分離処理させればよい。

パターンの追加、変更は自由です。計算方式は色々とあると思います。


パターンの時間調整

Flash用であるのでこんなに速くは実行できない、実際には、配列delay_stに代入する際に時間の調整を行う。下記の例では2倍にしている。計算は自由ですが遅いと、画面分割数が多い時「画面推移」に長くかかる。
delay_st値の保存に配列を使用しているのは、反転 reverse() のためです。


//pattern倍速補正
if (patternflag) {
	delay_st[k]=delay_pt[k]*2*delay_speed;
}

細やかなところは delay_speed で調整できる。

分割表示とパターンの適用などは簡単であるが、もし合わない所が出た場合の修正が大変なだけである。別に気にならない性格の人はホットケバ良い。


サンプルの HTML JS CSS


パターン説明用ですので、他のJSと似ているようですが、変数など簡略しています。

1. このままで使用可能ですが、他のJSと違う部分あり。
2. 縦横複数分割用(升目状)。5.7.9などの奇数値が良い。なるべく画像を正方形に近い分割にするとキレイ。
3. 途中、分割は変わらない。
4. IN OUT は自動でランダムに変わります。パターンの種類もランダムに変わります。
5. エフェクト数が少ないので多少判り易くなっている(理解には個人差あり)。


HTML


<ul id="tab-menu">
	<li text="/main/images/toyota_car10.jpg">PHOTO1</li>
	<li text="/main/images/toyota_car11.jpg">PHOTO2</li>
	<li text="/main/images/toyota_car12.jpg">PHOTO3</li>
	<li text="/main/images/toyota_car13.jpg">PHOTO4</li>
</ul>
<div id="image-box-base">
	<div id="image-box"><img /></div>
	<div id="top-box"></div>
	<div id="loading"></div>
	<div id="text-view"></div>
</div>

JS

slice02.js


//slice02.js
//日本語
//パターン使用

(function($){

	$(function () {

		//設定
		var select_no=0;//最初に開くメニューの位置
		var speed=600;//フェード速度 400-800
		var delay_speed = 100;//delay基準時間 50-200

		box_W=640;//画像BOX幅
		box_H=300;//画像BOX高さ

		//TEXT使用
		textview_use="use";// use none

		//分割の設定
		var split_h=9;//横分割数
		var split_v=5;//縦分割数

		var split_total=split_h*split_v;//分割合計

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

		var no=0;
		var keep_no=select_no;
		var img_url="";
		var load_url="";
		var keep_url;

		//chip sliceオブジェクト
		var chipboxs = [];
		//chipの位置、大きさ保存容器
		var chip_pos_X = [],chip_pos_Y = [],chip_W = [],chip_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 slice_move_type="in";

		//移動位置配列
		var mv_posX=[];
		var mv_posY=[];
		//移動大きさ配列
		var mv_chipW=[];
		var mv_chipH=[];

		var sliceflag = 0;
		var anime_move = false;
		var box_len;
		var delayflag = 0;
		var patternflag=false;

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

		//外枠jqueryオブジェクト
		var tabmenu=$("#tab-menu");
		var boxbase=$("#image-box-base");
		var imagebox=$("#image-box");
		var topbox=$("#top-box");
		var loading=$("#loading");

		//欄外移動
		topbox.css({'left':box_W});
		//loadingを一旦けす
		loading.css({'display':'none'});

		//指定場所のOPEN
		tabmenu.find("li").eq(select_no).addClass("active");
		img_url=tabmenu.find("li").eq(select_no).attr('text');
		//指定画像を表示
		imagebox.children("img").attr({'src':img_url});
		//
		load_url=keep_url=img_url;

		//スライス要素作成
		init();

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

		//init スライス要素作成
		function init() {

			//スライス要素最大値
			var roop_v=split_total;
			//スライス要素を作る
			//make chip
			var sliceboxs="";
			for (var i=0; i < roop_v; i++) {
				sliceboxs += '<div id="'+ 'slice'+ i + '" class="slice_bk"></div>';
			}
			//append #top-box
 			$('#top-box').append(sliceboxs);
			//len 実際に作った個数
			box_len = $('.slice_bk').length;
			//slice chips
			for (var i=0; i < roop_v; i++) {
				chipboxs[i] = $("#slice"+i);
			}

			//slice-set
			slice_set();

		}

		//スライス要素の位置大きさ決定、保存
		function slice_set() {

			//スライス
			slice_W=Math.round(box_W/split_h);//YOKO
			slice_H=Math.round(box_H/split_v);//TATE
			slice_Wb=box_W-slice_W*(split_h-1);
			slice_Hb=box_H-slice_H*(split_v-1);

			var k=0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {
					//大きさ保存
					chip_W[k]=slice_W;
					if (i == split_h-1) {chip_W[k]=slice_Wb;}
					chip_H[k]=slice_H;
					if (j == split_v-1) {chip_H[k]=slice_Hb;}
					//位置保存
					chip_pos_X[k]=slice_W*i;
					chip_pos_Y[k]=slice_H*j;

					k ++;
				}
			}
		}

		//メニューclick-action
		tabmenu.find("li").click(function() {

			//作動中は反応しない
			if(anime_move) {return false}
			no=tabmenu.find("li").index(this);
			if(no == keep_no) {return false}
			//メニューactive
			tabmenu.find("li").removeClass("active");
			$(this).addClass("active");

			//画像URL取得、画像の読み込み
			load_url=$(this).attr('text');
			imgload ();
			return false;

		});

		//loading-click-action
		loading.click(function() {
			//
			loading.css({'display':'none'});
			//menuを前に戻す
			tabmenu.find("li").removeClass("active");
			tabmenu.find("li").eq(keep_no).addClass("active");
			//フラグもどす
			anime_move = false;
			return false;
		});

		//画像Preloader
		function imgload () {

			loading.css({'display':'block'});
			//imgPreloaderを作成
			var imgPreloader=new Image();
			//イベントハンドラ
			imgPreloader.onload=function() {

				loading.css({'display':'none'});
				//画像表示に進む
				show_image();

			}
			//重要、最後に書く
			imgPreloader.src=load_url;
		}

		//画像表示処理
		function show_image() {

			anime_move = true;

			//BOX欄外移動
			topbox.css({'left':box_W,'top':0});

			//IN OUT ランダム設定
			slice_move_type=in_type_nm[Math.floor(Math.random()*in_type_nm.length)];

			//delayクリア
			var delay_st=[];
			//delayパターンクリアnew Array()
			var delay_pt=[];

			//opacity用/スケール0は透明
			var optflag=Math.floor(Math.random()*4);

			//多目的判定用
			var chgxyflag=Math.floor(Math.random()*5);
			//delayed遅延させる/20%
			var delayed=Math.floor(Math.random()*5);
			//標準delay_no 0-8/ここでは未使用
			var delay_no=Math.floor(Math.random()*8);

			//スケール変化
			var scale_no=Math.floor(Math.random()*2);

			//パターン使用パターン有効100%
			var pattern_no=0;
			patternflag=true;
			pattern_no=Math.floor(Math.random()*22) || 0;

			//optflag=0の場合透明度を設定する
			var opt=false;
			if (optflag < 1) {opt=true;}

			//透明はスケール0
			if(opt) {scale_no=0;}
			//スケール0 は透明
			if(scale_no == 0) {opt=true;}

			var slice_url=load_url;
			if (slice_move_type == 'out') {slice_url=keep_url;}

			//背景画像挿入
			var k = 0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {

					//位置大きさ
					chipboxs[k].css({'left':chip_pos_X[k],'top':chip_pos_Y[k],'width':chip_W[k],'height':chip_H[k]});
					//BACKGROUND-SET url
					chipboxs[k].css({'background-image':'url('+ slice_url + ')'});
					//BACKGROUND-SET position
					chipboxs[k].css({'backgroundPosition':(chip_pos_X[k] * -1) + 'px ' + (chip_pos_Y[k] * -1) + 'px'});

					k ++;
				}
			}

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

			//初期の大きさ-SET
			var pos_sx=0;
			var pos_sy=0;
			var chipW=0;
			var chipH=0;
			var flag3=1;
			var k = 0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {

					//opacityの補正
					chipboxs[k].css({'opacity':1});

					//中心補正
					if(scale_no == 1) {
					//全てその場中心補正、実際には場所をずらして中心補正をしているようにみせかけて要る
						pos_sx=chip_pos_X[k]+Math.floor(chip_W[k]/2);
						pos_sy=chip_pos_Y[k]+Math.floor(chip_H[k]/2);
						chipW=0;
						chipH=0;
					}
					//scale_no 0 中心補正無し
					if(scale_no == 0) {
						pos_sx=chip_pos_X[k];
						pos_sy=chip_pos_Y[k];
						chipW=chip_W[k];
						chipH=chip_H[k];
					}

					//位置大きさ保存
					mv_posX[k]=pos_sx;
					mv_posY[k]=pos_sy;
					//移動大きさ保存
					mv_chipW[k]=chipW;
					mv_chipH[k]=chipH;

					//CSSの設定、inは移動させる
					if (slice_move_type == 'in') {
						chipboxs[k].css({'left':pos_sx,'top':pos_sy,'width':chipW,'height':chipH});
						//透明度設定
						if(opt) {chipboxs[k].css({'opacity':0});}
					}

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

			//パターン
			var sh=split_h-1;
			var sv=split_v-1;
			var center_no=split_total/2-1;

			if (patternflag) {
				var k=0;
				var kk=0;
				for (var i=0; i < split_h; i++) {
					for (var j=0; j < split_v; j++) {
						kk = j * split_h + i;
						switch(pattern_no){
							case 0:
								delay_pt[k]=Math.abs(i-(sh/2))+Math.abs(j-(sv/2));
							break;
							case 1:
								delay_pt[k]=k*0.2;
							break;
							case 2:
								delay_pt[k]=Math.abs(i+0.5-sh/2)+j*0.01;
							break;
							case 3:
								delay_pt[k]=Math.abs(i-j*split_h/split_v);
								//delay_pt[k]=Math.abs(i-j);
							break;
							case 4:
								delay_pt[k]=(j+i)/4+2*i;
							break;
							case 5:
								//delay_pt[k]=2;
								//対角早い
								delay_pt[k]=(i+j)*0.2;
							break;
							case 6:
								delay_pt[k]=Math.abs(sv-j)+Math.abs(sh-i);
							break;
							case 7:
								delay_pt[k]= 2+Math.abs(sh-i);
							break;
							case 8:
								delay_pt[k]=(Math.abs(Math.abs(i-sh/2)-sh)+Math.abs(Math.abs(j-sv/2)-sv))*0.75;
							break;
							case 9:
								delay_pt[k]=Math.abs(i-sh/2)+j*0.01;
							break;
							case 10:
								delay_pt[k]=(split_h*split_v-kk)/2;
							break;
							case 11:
								delay_pt[k]=kk/2;
							break;
							case 12:
								delay_pt[k]=(2+j)+(Math.abs(Math.abs(i-sh/2)-sh));
							break;
							case 13:
								delay_pt[k]=Math.floor(Math.random()*10)+1;
							break;
							case 14:
								delay_pt[k]=Math.abs(k-(split_h*split_v)/2)/2;
							break;
							case 15:
								delay_pt[k]=Math.abs(k/2-j)/2;
							break;
							case 16:
								delay_pt[k]=Math.abs(i-(sh/2))-Math.abs(j-(sv/2));
							break;
							case 17:
								delay_pt[k]=Math.abs(j*split_h/split_v-Math.abs(i-sh));
							break;
							case 18:
								delay_pt[k]=Math.abs(j+Math.abs(i-sh));
							break;
							case 19:
								delay_pt[k]=Math.abs(i+Math.abs(j-sv));
							break;
							case 20:
								delay_pt[k]=2+ Math.abs(sv-j)+(Math.abs(Math.abs(i-sh/2)-sh));
							break;
							default:
								delay_pt[k]=(i+j);
							}

						k ++;
					}
				}

			}

			//delayを設定する/delay_noで判定
			var flag3=1;
			var kk=0;//方向違いカウント
			var kkk=0;//半分でカウントダウン
			var k=0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {


					//縦方向にカウント
					kk=i*split_v+j;
					kkk=k;
					if (k > (split_total-1)/2) {kkk=Math.abs(split_total-k)-1;}

					if (!patternflag) {
						delay_st[k]=(i+j+k/split_total/4)*delay_speed;
					}
					//pattern倍速補正
					if (patternflag) {
						delay_st[k]=delay_pt[k]*2*delay_speed;
					}

					//delayed遅延
					if (delayed == 1) {
						if (flag3 < 0) {delay_st[k] +=500;}
					}

					k ++;
					flag3 *= -1;

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

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

			//原点に戻す
			topbox.css({'left':0,'top':0});

			//textview
			if (textview_use == 'use') {
				var reverse_tx="";
				if (chgxyflag > 2) {reverse_tx=" / 反転";}
				text=" .SPLIT[ " + split_h + " x " + split_v + " ] / TYPE " + slice_move_type + " / PTN-No " + pattern_no + reverse_tx;
				$("#text-view").text(text);
			}

			//アニメ実行、IN OUT 共用にして、取替え用変数
			var start_opt=1,end_opt=1;
			//スライスアニメカウント
			sliceflag = 0;
			var k = 0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {

					//IN OUT 差し替え
					if (slice_move_type == 'in') {

						//anime
						chipboxs[k].delay(delay_st[k]).animate({'opacity':end_opt,'left':chip_pos_X[k],'top':chip_pos_Y[k],'width':chip_W[k],'height':chip_H[k]},speed,function() {
							sliceflag ++;
							//goto slice_image_parts
							if (sliceflag == split_total) {slice_image_parts();}
						});

					}
					if (slice_move_type == 'out') {

						//透明度設定
						if(opt) {end_opt=0;}
						//anime
						chipboxs[k].delay(delay_st[k]).animate({'opacity':end_opt,'left':mv_posX[k],'top':mv_posY[k],'width':mv_chipW[k],'height':mv_chipH[k]},speed,function() {
							sliceflag ++;
							//goto slice_image_parts
							if (sliceflag == split_total) {slice_image_parts();}
						});

					}

					k ++;
				}
			}

		}

		//アニメ終了処理
		function slice_image_parts() {

			setTimeout(function(){
				sliceflag = 0;
				img_url=load_url;

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

				topbox.css({'left':box_W,'top':0});

				anime_move=false;
				keep_no=no;
				//keep-url
				keep_url=load_url;

			},500);
		};

	});

})(jQuery);

書き換えなどは自由ですが、動作を理解の上に使用者の自己責任で願います。


CSS

slice02.css


/* slice02.css 日本語 */

/* tab-menu  */
ul#tab-menu {
display:inline-block;
list-style:none;
width:100%;
height:20px;
margin:0;
padding:0;
}
#tab-menu li {
display:inline;
list-style:none;
width:60px;
height:20px;
line-height:20px;
font-size:11px;
font-weight:bold;
text-align:center;
margin-right:2px;
border-top-left-radius:5px;
border-top-right-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-top-left:5px;
-webkit-border-radius-top-right:5px;
background-color:#888888;
float:left;
cursor:pointer;/*default*/
}
#tab-menu li.active {
background-color:#EEEEEE;
}
#tab-menu li:hover {
color:#FFFFFF;
background-color:#FF1493;
}

/* image-box-base */
#image-box-base {
position:relative;
top:0;left:0;
display:block;
width:640px;
height:300px;
padding:0;
margin:0;
background-color:#000000;
overflow:hidden;
}

/* image-box */
#image-box {
position:absolute;
top:0;left:0;
display:block;
width:640px;
height:300px;
padding:0;
margin:0;
background-color:#000000;
}
#image-box img {
width:100%;
height:100%;
}

#top-box {
position:absolute;
top:0;left:0;
display:block;
width:640px;
height:300px;
padding:0;
margin:0;
overflow:hidden;
}

#top-box .slice_bk {
position:absolute;
top:0;left:0;
background-position: 0 0;
overflow:hidden;
}

/* loading */
#image-box-base #loading {
display:block;
position:absolute;
top:0;left:0;
width:100%;height:100%;
background:url("/main/images/loading.gif") no-repeat center center;
background-color:transparent;
}

/* text */
#text-view {
position:absolute;
top:0;left:0;
font-size:12px;
color:#FF0000;
}

画像URLなどはサンプルのものです。実際環境に合わせてください。

注意、loadingは一般的によく使用されています、他のJSと競合する場合は、ID名を変えるなどの処置をして下さい。


実際の使用

パターンだけの表示切替でなら実際に使用可能です。分割は縦横とも奇数が良い。其の外はJS上部をご覧下さい。
これを利用して、拡張した形態のJSは、次ぎのページに掲載します。


状況の表示

設定状況など、テキストで表示するようにしています。書き換え変更などの際に便利です。いらない場合は、非表示にも出来ますが、削除しても結構です。
色々な形態でのエフェクトを決定するに、条件分岐を多用しますので、変数など確認しながら作りこむ時に重要な手助けになります。



HTML
<div id="text-view"></div>

JS
//TEXT使用
textview_use="use";// use none

//textview
if (textview_use == 'use') {
	text="必要な情報が表示できるようにテキストを書く";
	$("#text-view").text(text);
}

終了処理の setTimeout について

Firefox対策である。マシン環境が悪いFirefoxで(環境が悪くてFirefoxを使用することは常識的には無いはずだ)、画像のすり替え処理でタイミングが合わなくなる場合に有効である。従来は setTimeout は無いので削除しても良い。


Loading画像など

使用画像は原則、使用者がご用意ください。Loading画像は好きなものが使用可能です。

loading.gif 31x31 :




「標準的なパターン」を使用しない例
動きにあわせ、其の都度パターンを作っているのですが、多少スクリプト記述に違いあり。

【参考】当方の前ページの記事: jQueryで画像分割を変化して表示する


FLASHで同様のパターンを使用した例
FLASH AS3 による、画像をスライスして表示するスライドショーです。JS拠り軽快です。

【参考】当方のFLASH記事: FLASH-SLIDESHOW-1


簡単説明ですが、以上です。

 


[ この記事のURL ]


タグ:jquery , photo , memo , slice

 

ブログ記事一覧



[1]