JSアルバム画像の揺れと拡大表示効果のサンプルコード

var xm;
var ym;
 
/* ==== onmousemove イベント ==== */
document.onmousemove = function(e){
	ウィンドウのイベントを生成
	xm = (ex || e.clientX);
	ym = (ey || e.clientY);
}
 
/* ==== ウィンドウのサイズ変更 ==== */
関数 resize() {
	if(diapo)diapo.resize();
}
onresize = サイズ変更;
 
/* ==== 不透明度 ==== */
setOpacity = function(o, alpha){
	if (o.filters) o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
}
 
 
 
/* ===== スクリプトをカプセル化 ==== */
ディアポ = {
	O : [],
	DC: 0,
	画像: 0,
	テキスト: 0,
	N:0,
	xm : 0,
	ym:0,
	0,
	ny : 0,
	北西:0,
	0,
	rs:0,
	rsB: 0,
	ゾ:0,
	送信位置: 0,
	tx_var: 0,
	送信ターゲット: 0,
 
	/// スクリプトパラメータ 
	アトラクション：2、
	加速度: .9,
	減衰：.1、
	ズームオーバー: 2,
	ズームクリック: 6,
	透明度: .8、
	フォントサイズ: 18,
	//
 
	/* ==== ダイヤポのサイズ変更 ==== */
	サイズ変更: 関数(){
		(これ){
			nx = DC.offsetLeft;
			ny = DC.offsetTop;
			nw = DC.オフセット幅;
			nh = DC.オフセット高さ;
			txt.style.fontSize = Math.round(nh / font_size) + "px";
			Math.abs(rs-rsB)<100の場合、var i=0; i<N; i++) O[i].resize();
			rsB = rs;
		}
	},
 
	/* ==== ダイアポを作成 ==== */
	CDiapo: 関数(o){
		/* ==== 初期化変数 ==== */
		this.o = o;
		this.x_pos = this.y_pos = 0;
		this.x_origin = this.y_origin = 0;
		this.x_var = this.y_var = 0;
		this.x_target = this.y_target = 0;
		this.w_pos = this.h_pos = 0;
		this.w_origin = this.h_origin = 0;
		this.w_var = this.h_var = 0;
		this.w_target = this.h_target = 0;
		this.over = false;
		this.click = false;
 
		/* ==== 影を作成する ==== */
		this.spa = document.createElement("span");
		this.spa.className = "spaDC";
		diapo.DC.appendChild(this.spa);
 
		/* ==== サムネイル画像を作成 ==== */
		ドキュメントに要素を追加します。
		this.img.className = "imgDC";
		o.src をコピーします。
		this.img.O = これ;
		diapo.DC.appendChild(this.img);
		不透明度を設定します(this.img、diapo.transparency);
 
		/* ==== マウスイベント ==== */
		this.img.onselectstart = 新しい関数("return false;");
		this.img.ondrag = 新しい関数("return false;");
		this.img.onmouseover = 関数(){
			diapo.tx_target=0;
			diapo.txt.innerHTML=this.Ooalt;
			this.O.over = true;
			不透明度を設定します(this、this.O.click?diapo.transparency:1);
		}
		this.img.onmouseout = 関数(){
			diapo.tx_target=-diapo.nw;
			this.O.over = false;
			不透明度を設定します(this,diapo.transparency);
		}
		this.img.onclick = 関数() {
			if(!this.O.click){
				diapo.zo が this の場合、 diapo.zo.onclick() を実行します。
				this.O.click = true;
				this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;
				this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;
				diapo.zo = これ;
				不透明度を設定します(this,diapo.transparency);
			} それ以外 {
				this.O.click = false;
				this.O.over = false;
				this.O.resize();
				ディアポ.ゾ = 0;
			}
		}
 
		/* ==== "imgsrc" 画像の位置に基づいてサムネイルを並べ替える ==== */
		this.resize = 関数 (){
			（これ）{
				x_origin = o.offsetLeft;
				y_origin = o.offsetTop;
				w_origin = o.offsetWidth;
				h_origin = o.offsetHeight;
			}
		}
 
		/* ==== アニメーション関数 ==== */
		this.position = 関数 (){
			（これ）{
				/* ==== ターゲット位置を設定 ==== */
				w_target = w_origin;
				h_target = h_origin;
				if(以上){
					/* ==== マウスオーバー ==== */
					w_target = w_origin * diapo.zoomOver;
					h_target = h_origin * diapo.zoomOver;
					x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));
					y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));
				} それ以外 {
					/* ==== マウスアウト ==== */
					x_target = x_origin;
					y_target = y_origin;
				}
				if(クリック){
					/* ==== クリックされました ==== */
					w_target = w_origin * diapo.zoomClick;
					h_target = h_origin * diapo.zoomClick;
				}
 
				/* ==== 魔法のスプリング方程式 ==== */
				x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
				y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
				w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
				h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);
				diapo.rs += (Math.abs(x_var) + Math.abs(y_var));
 
				/* ==== html アニメーション ==== */
				(img.style){で
					左 = Math.round(x_pos) + "px";
					上 = Math.round(y_pos) + "px";
					幅 = Math.round(Math.max(0, w_pos)) + "px";
					高さ = Math.round(Math.max(0, h_pos)) + "px";
					zIndex = Math.round(w_pos);
				}
				スパスタイル付き{
					左 = Math.round(x_pos + w_pos * .1) + "px";
					上 = Math.round(y_pos + h_pos * .1) + "px";
					幅 = Math.round(Math.max(0, w_pos * 1.1)) + "px";
					高さ = Math.round(Math.max(0, h_pos * 1.1)) + "px";
					zIndex = Math.round(w_pos);
				}
			}
		}
	},
 
	/* ==== メインループ ==== */
	実行: 関数(){
		diapo.xm = xm - diapo.nx;
		diapo.ym = ym - diapo.ny;
		/* ==== キャプションアニメーション ==== */
		diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
		diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
		/* ==== 画像アニメーション ==== */
		for(var i in diapo.O) diapo.O[i].position();
		/* ==== ループ ==== */
		タイムアウトを設定します("diapo.run();", 16);
	},
 
	/* ==== 画像を読み込む ==== */
	イメージロード: 関数(){
		// ===== すべての画像が読み込まれるまでループします =====
		var M = 0;
		for(var i=0; i<diapo.N; i++) {
			diapo.img[i].complete の場合
				diapo.img[i].style.position = "相対的";
				diapo.O[i].img.style.visibility = "表示可能";
				diapo.O[i].spa.style.visibility = "表示可能";
				M++;
			}
			サイズを変更します。
		}
		M<diapo.Nの場合、タイムアウトを設定します("diapo.images_load();", 128);
	},
 
	/* ==== 初期化スクリプト ==== */
	初期化:関数() {
		diapo.DC = document.getElementById("diapoContainer");
		diapo.img = diapo.DC.getElementsByTagName("img");
		diapo.txt = document.getElementById("キャプション");
		diapo.N = diapo.img.length;
		i=0; i<diapo.N; i++) diapo.O.push(新しいdiapo.CDiapo(diapo.img[i]));
		diapo.resize();
		diapo.tx_pos = -diapo.nw;
		diapo.tx_target = -diapo.nw;
		diapo.images_load();
		diapo.run();
	}
}
 
/* ==== 開始スクリプト ==== */
関数dom_onload() {
	document.getElementById("diapoContainer") の場合、diapo.init(); そうでない場合は、setTimeout("dom_onload();", 128);
}
dom_onload();