POPSブログ

簡易TRANSITION-PHOTO/4

49

  Category:  jquery2012/03/09 pops 

簡易TRANSITION-PHOTO-4、画像に拡大縮小フエードとスライスエフェクトをくわえます。


簡易TRANSITION-PHOTO-4 (スライス + 拡大縮小フエード)

pops-transitionphoto04.js

トランジッション、サンプル表示



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

  • 簡易TRANSITION-PHOTO-2 拡大縮小フエード、にスライスエフェクトを加えました。
  • 簡単なスライド部分はスライスエフェクトを利用しています。
  • IE8 はキレイに動作しません。Google Chrome を利用ください。

簡単な動作の説明

拡大縮小フエード層、スライスエフェクト層、の2種の層を重ねて動作させています。
スライスエフェクトにはスライドをさせる機能がありますので、1枚画像のスライドはこちらを利用しています。
スライスエフェクトの設定はランダムなために、必ずしも分割状況に合ったエフェクトをするとは限りません。但し、多くのエフェクトを行うことが可能です。



使用に当たり下記設定部分を変更ください

途中略す

//大きさ
var bs_W = 640;
var bs_H = 200;

画像を正方形に近く分割できるようにしてください

//標準分割4x2以上
var split_h = 9;
var split_v =3;

ランダムに分割される場合の条件です

//最大自由分割4x4以上
var max_split_h=10;
var max_split_v=6;

時間設定、PUFF拡大縮小とスライスの2種の速度があります。
slice_speedはスライス要素のアニメ速度、delay_speedは要素の出現間隔です。

var first_time = 12000;//スタートまでの時間、5000以上 
var cycle_time = 8000;//サイクル 5000以上
var speed = 1000;//PUFF拡大縮小時間 600-1000位画像の大きさによる

var slice_speed = 600;//SLICE拡大縮小時間 400-1000
var delay_speed = 150;//delay基準時間 100-200

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

//画像までのパス
var path='/main/images/';
//画像名を登録する
var img_urls=['photo_tm1.jpg','photo_tm2.jpg','photo_tm3.jpg','photo_tm4.jpg','photo_tm5.jpg'];

途中略す

slice、puff、の出現確率を変更できます

var random_nm = ['slice','puff','slice','puff','slice'];


【参照】TRANSITION-PHOTO-2: 簡易TRANSITION-PHOTO/2

【参照】SLICE-PHOTO-6: 簡易SLICE-PHOTO/6


設置方法

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


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


<div id="pops_transition_photo">
	<div id="transit_box">
		<div id="t_imgholder"><img src="/main/images/photo_tm1.jpg" /></div>
		<div id="slice_base"></div>
		<div id="top_base"><img /></div>
		<div id="t_loading"></div>
		<div id="view_text"></div>
	</div>
</div>

注意、原則、最初の画像を #t_imgholder に書き込んでください。また全画像はJSに登録します。画像伸縮のため幅高さを100%で使用しますので、大きさは記入しないでください。


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


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

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

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

JS、CSS、Loading画像

JS pops-transitionphoto04.js 通常方式

ActinScriptのTransitionとは意味がちがいます。中には使用していない変数もあります。


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

(function($){

	$(function(){

		//大きさ
		var bs_W = 640;
		var bs_H = 200;

		//標準分割4x2以上
		var split_h = 9;
		var split_v =3;

		//最大自由分割4x4以上
		var max_split_h=10;
		var max_split_v=6;

		//合計
		var split_total = split_h*split_v;
		var max_split_total = max_split_h*max_split_v;

		var first_time = 12000;//スタートまでの時間、5000以上 
		var cycle_time = 8000;//サイクル 5000以上
		var speed = 1000;//PUFF拡大縮小時間 600-1000位画像の大きさによる

		var slice_speed = 600;//SLICE拡大縮小時間 400-1000
		var delay_speed = 150;//delay基準時間 100-200

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

		//画像までのパス
		var path='/main/images/';
		//画像名を登録する
		var img_urls=['photo_tm1.jpg','photo_tm2.jpg','photo_tm3.jpg','photo_tm4.jpg','photo_tm5.jpg'];
		var list_len=img_urls.length;

		//jQueryObjectCache
		var imgholder_elm,trans_base_elm,mid_elm,top_elm;
		var slicebase;
		var img_url,keep_url,loading;
		var imgPreloader;//opela

		//chash
		trans_base_elm = $('#transit_box');
		imgholder_elm = $('#transit_box #t_imgholder');
		slicebase = $('#transit_box #slice_base');
		top_elm = $('#transit_box #top_base');
		loading = $('#transit_box #t_loading');

		var view_type = 'slice';
		var random_nm = ['slice','puff','slice','puff','slice'];

		//position
		//puff
		var puff_type_x = [],puff_type_y = [];

		//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;
		var sliceflag = 0;
		//移動位置配列
		var mv_posX = [];
		var mv_posY = [];
		//移動大きさ保存配列
		var mv_sW=[];
		var mv_sH=[];

		var count = 0;
		var no = 0;
		var move_type_name = ['in','out','in','out'];
		var in_type = "in";
		var fade_set = "";
		var anime_move = "";

		var box_len;
		var delayflag = 0;

		//TEXT用
		var bar_type_nm=['STAD','PIC','BAR-H','BAR-V','FREE','FREE','FREE','FREE','FREE','FREE'];

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

		//opacity使用の判定
		var support_op=true;
		if (!jQuery.support.opacity) {support_op=false;}

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

		//init
		var init = function () {

			//loading-Set
			loading.css({'width':bs_W,'height':bs_H,'display':'none'});
			//Box右移動、非表示
			top_elm.children("img").css({'width':'100%','height':'100%'});
			top_elm.css({'left':bs_W,'top':0,'display':'none'});


			//sliceBox非表示
			slicebase.css({'display':'none'});

			var roop_v = split_total;
			if (max_split_total>split_total) {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'});

			//位置情報取得
			puff_set();

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

			//下画像にURLをセット表示/未使用
			//imgholder_elm.children("img").empty().attr({'src':img_url});

			//次ぎの画像の番号セット
			count = 1;

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

		}

		//puff動作用の配列データのセット2/比率
		var puff_set = function () {
			//puff
			puff_type_x = [1,0.5,0,1,0.5,0,1,0.5,0,0];
			puff_type_y = [1,1,1,0.5,0.5,0.5,0,0,0,0];
		}

		//表示の種類により振り分け
		var set_view_images = function () {

			view_type = random_nm[Math.floor(Math.random() * random_nm.length)];

			if(view_type == 'puff') {
				puff_image();
			}
			if(view_type == 'slice') {
				slice_image();
			}

		}

		//Puffフエード処理表示
		var puff_image = function () {

			anime_move = 'move';
			fade_set = "fade";

			//opacity
			var start_opacity = 0;
			var end_opacity = 1;

			var fade_type = "puff";
			top_elm.css({'top':0,'left':bs_W,'width':bs_W,'height':bs_H});
			in_type = move_type_name[Math.floor(Math.random() * move_type_name.length)];

			//puffの出現確率、0-8はpuff、それ以上はcrossfadeになります
			no = Math.floor(Math.random() * 12);//10
			if (no > 8) {no = 9;fade_type = "crossfade";in_type = "in";}

			//TEXT
			set_text(fade_type + " No. " + no);

			var s_p_y = 0,s_p_x = 0,s_W = bs_W,s_H = bs_H,e_p_y = 0,e_p_x = 0,e_W = bs_W,e_H = bs_H;
			//FadeTime
			var fade_time = Math.floor(speed * 1.25);
			//rate
			var scale_rate = 1.35;
			//puff
			if (fade_type == 'puff') {
				var scaleW = Math.round(bs_W * (scale_rate - 1));
				var scaleH = Math.round(bs_H * (scale_rate - 1));
				s_p_y = Math.floor(scaleH * puff_type_y[no]) * -1;
				s_p_x = Math.floor(scaleW * puff_type_x[no]) * -1;
				s_W = Math.ceil(bs_W * scale_rate) + 2;
				s_H = Math.ceil(bs_H * scale_rate) + 2;
				e_p_y = 0;
				e_p_x = 0;
				e_W = bs_W;
				e_H = bs_H;
			}
			if (fade_type != 'puff') {
				fade_time = speed;
			}

			//IN
			if (in_type == 'in') {
				//opacity
				start_opacity = 0;
				end_opacity = 1;
				//TOPelm
				top_elm.css({'top':s_p_y,'left':s_p_x,'width':s_W,'height':s_H});
				top_elm.children("img").empty().attr({src:img_url});
				top_elm.css({'display':'block'});
				//アニメ
				top_elm.css({'opacity':start_opacity}).animate({'top':e_p_y,'left':e_p_x,'width':bs_W,'height':bs_H,'opacity':end_opacity},fade_time,function() {
					imgholder_elm.children("img").empty().attr({'src':img_url});
					top_elm.css({'top':0,'left':bs_W,'display':'none'});
					trans_image_parts();
				});
			}
			//OUT
			if (in_type == 'out') {
				//opacity
				start_opacity = 1;
				end_opacity = 0;//0.01
				//TOPelm
				top_elm.css({'top':e_p_y,'left':e_p_x,'width':bs_W,'height':bs_H});
				top_elm.children("img").empty().attr({src:keep_url});
				top_elm.css({'display':'block'});
				//
				imgholder_elm.children("img").empty().attr({'src':img_url});
				//アニメ
				top_elm.css({'opacity':start_opacity}).animate({'top':s_p_y,'left':s_p_x,'width':s_W,'height':s_H,'opacity':end_opacity},fade_time,function() {
					top_elm.css({'top':0,'left':bs_W,'display':'none'});
					trans_image_parts();
				});
			}
		}

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

			//TOPelmは移動しておく
			top_elm.css({'top':0,'left':bs_W});

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

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

			//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;
			//分割の種類、標準か可変か/5
			var split_type = Math.floor(Math.random() * 5);

			//STANDERD
			if (split_type == 0) {
				//標準分割升目に分割
				new_split_h=split_h;
				new_split_v=split_v;
			}
			//PIC 1x1
			if (split_type == 1) {
				//分割なし1枚画像
				new_split_h=1;
				new_split_v=1;
			}
			//1x1が出ないように修正
			//BAR-H
			if (split_type == 2) {
				//可変随時分割
				new_split_h=Math.floor(Math.random() * max_split_h-1)+2;
				new_split_v=1;
			}
			//BAR-V
			if (split_type == 3) {
				//可変随時分割
				new_split_h=1;
				new_split_v=Math.floor(Math.random() * max_split_v-1)+2;
			}
			//FREE
			if (split_type > 3) {
				//可変随時分割
				new_split_h=Math.floor(Math.random() * max_split_h-1)+2;
				new_split_v=Math.floor(Math.random() * max_split_v-1)+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 ++;
				}
			}

			new_split_total=new_split_h*new_split_v;

			//逆転フラグ/mvchegflag=1 逆転
			//逆転計算/20%
			var mvchegflag = Math.floor(Math.random() * 5);
			//多目的判定用
			var chgxyflag = Math.floor(Math.random() * 5);
			//多目的判定用2 方向 0-4
			var chgflag = Math.floor(Math.random() * 5);
			//多目的判定用3 追加 0-3
			var hvflag = Math.floor(Math.random() * 3);
			//delayed遅延させる/20%
			var delayed = Math.floor(Math.random() * 5);
			//random-scale
			var random_scale=Math.floor(Math.random() * 2);
			//random_scale 0 3 の2種類のみに制限
			//分割なしは 0
			if (split_type == 1) {random_scale=0;}
			if (random_scale > 0) {random_scale = 3;}

			//IN OUT
			in_type = move_type_name[Math.floor(Math.random() * move_type_name.length)];
			//標準delay_no 0-7
			var delay_no = Math.floor(Math.random() * 8);

			//url
			var slice_url = img_url;
			//OUTは下層画像URL取得
			if (in_type == 'out') {slice_url = keep_url;}

			//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 (in_type == 'out') {imgholder_elm.children("img").empty().attr({'src':img_url}).css({'display':'block'});}


			//スライド位置を条件別に設定する
			//初期の大きさ-SET
			var pos_sx = 0;
			var pos_sy = 0;

			//kの中央値
			center_v=(new_split_total-1)/2;
			//even
			var even_h = 0;
			var even_v = 0;

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

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

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

					pos_sx = slicebs_pos_x[k];
					pos_sy = slicebs_pos_y[k];

					even_v = 0;
					if (j % 2 != 0) {even_v = 1;}

					//random_scale3
					if (random_scale == 3) {
						//XY
						//その場中心補正、実際には場所をずらして中心補正をしているようにみせかけて要る
						pos_sx = slicebs_pos_x[k] + Math.floor(slicebs_W[k] / 2);
						pos_sy = slicebs_pos_y[k] + Math.floor(slicebs_H[k] / 2);
						if (in_type == 'in') {slice_chips[k].css({'top':pos_sy,'left':pos_sx,'width':0,'height':0});}
						//outはcss移動なし、大きさそのまま
						if (in_type == 'out') {
							//移動位置配列に位置保存
							mv_posX[k]=pos_sx;
							mv_posY[k]=pos_sy;
						}
					}
					//random_scale0
					if (random_scale != 3) {
						//上方向
						if (chgflag == 0) {
							pos_sy=slicebs_H[k]*-1;
							//交互に逆方向
							if (even_v && mvchegflag == 1) {pos_sy=bs_H;}
							if (even_h && mvchegflag == 2) {pos_sy=bs_H;}
						}
						//下方向
						if (chgflag == 1) {
							pos_sy=bs_H;
							if (even_v && mvchegflag == 1) {pos_sy=slicebs_H[k]*-1;}
							if (even_h && mvchegflag == 2) {pos_sy=slicebs_H[k]*-1;}
						}
						//右方向
						if (chgflag == 2) {
							pos_sx=bs_W;
							if (even_v && mvchegflag == 1){pos_sx=slicebs_W[k]*-1;}
							if (even_h && mvchegflag == 2){pos_sx=slicebs_W[k]*-1;}
						}
						//左方向
						if (chgflag == 3) {
							pos_sx=slicebs_W[k]*-1;
							if (even_h && mvchegflag == 1){pos_sx=bs_W;}
							if (even_v && mvchegflag == 2){pos_sx=bs_W;}
						}
						//強制左右両方向/4
						if (chgflag > 3) {
							pos_sx=bs_W;
							if (k > center_v) {pos_sx=slicebs_W[k]*-1;}
						}

						if (in_type == 'in') {
							//CSS移動
							slice_chips[k].css({'top':pos_sy,'left':pos_sx});
						}
						if (in_type == 'out') {
							mv_posX[k]=pos_sx;
							mv_posY[k]=pos_sy;
						}

					}
					
					k ++;
				}
			}

			//delay-SET出現間隔の操作
			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;}

					//random_scale3
					if (random_scale == 3) {

						if (delay_no == 0) {delay_st[k] = k * delay_speed;}
						if (delay_no == 1) {delay_st[k] = kk * delay_speed;}
						if (delay_no == 2) {delay_st[k] = Math.abs(k-new_split_total/2) * delay_speed;}

						//外から
						if (delay_no == 3) {delay_st[k] = kkk*delay_speed;}

						//同時
						if (delay_no == 4) {delay_st[k] = k * 4;}

						//IE対策、本来は(i+j)
						if (delay_no > 4) {delay_st[k] = (i+j+k/new_split_total/4) * delay_speed;}
					}
					//random_scale0
					if (random_scale == 0) {
						//2種のみ
						if (delay_no < 4) {delay_st[k] = k * delay_speed;}
						if (delay_no > 3) {delay_st[k] = kk * 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();
			}

			//TEXT
			var text="SPLIT:[" + bar_type_nm[split_type] + "][" + new_split_h + "x" + new_split_v + "] " + new_split_total + " /IN.OUT "+ in_type + " /DELAY " + delay_no + " /SCL "+ random_scale + " /MV " + chgflag + "";
			set_text(text);
			//set_text("START");

			//アニメspeed修正
			var speed_v=slice_speed;
			//同時はアニメ時間を長くする
			if (delay_no == 4 && random_scale == 3) {speed_v=slice_speed*3;}
			//分割なしはアニメ時間を長くする
			if (split_type == 1) {speed_v=slice_speed*2;}

			//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 (in_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 (in_type == 'out') {
						if (random_scale == 3) {anim_W=0;anim_H=0;anim_X=mv_posX[k];anim_Y=mv_posY[k];}
						if (random_scale == 0) {anim_W=slicebs_W[k];anim_H=slicebs_H[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) {trans_image_parts();}
					});
					k ++;
				}
			}

		};

		//end-anime 終了処理
		function trans_image_parts() {

			//SLICEの終了処理
			if(view_type == 'slice') {
				sliceflag = 0;
				imgholder_elm.children("img").empty().attr({'src':img_url}).css({'display':'block'});
				slicebase.css({'left':bs_W,'display':'none'});
			}


			anime_move = '';
			//fadeの場合opacity戻す
			if (fade_set=='fade') {
				top_elm.css({'opacity':1});
				//support.opacity判定/filterの除去
				if (!support_op) {top_elm.css({'filter':'none'});}
			}

			//Firefox対策/画像BOXの大きさを戻す
			top_elm.css({'width':bs_W,'height':bs_H});

			//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'});
				//TRANSITION振り分に進む
				set_view_images ();
			}
			//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-transitionphoto04.css


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

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

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

#transit_box #slice_base {
	display:block;
	position:absolute;
	top:0;left:0;
	overflow:hidden;
}
#transit_box #slice_base .slice_bk {
	position:absolute;
	background-position: 0 0;
	top:0;left:0;
	overflow:hidden;
}

#transit_box #top_base {
	display:block;
	position:absolute;
	top:0;left:0;
	overflow:hidden;
}
#transit_box #top_base img {
	width:100%;
	height:100%;
	border-style:none;
}

#transit_box #t_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*/
}
#transit_box #view_text {
	display:block;
	position:absolute;
	top:5px;left:5px;
	width:80%;
	height:20px;
	color:#FF0000;
}

以上です。



[ この記事のURL ]


タグ:jquery , Transition , photo , series

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

簡易TRANSITION-PHOTO/42012.03.09
簡易TRANSITION-PHOTO/32012.03.08
簡易TRANSITION-PHOTO/22012.03.07
簡易TRANSITION-PHOTO/12012.03.06

 

ブログ記事一覧

年別アーカイブ一覧



[1]