拡大画像拡大画像ホバー効果のためのjQueryプラグイン

jQueryのプラグインをすべて知っているが、最近、共有ポイントjQueryのプラグインエフェクト、開発効果を使用して簡単に非常に強いです。

、HTMLコード

スクリプトタイプ= "テキスト/ javascriptの"> $（ドキュメント）.ready（関数（）{ 
    $（ "＃1 testimg"）zoomImgRollover（）; 
}）; 
</ SCRIPT>



<スタイルタイプ= "テキスト/ CSS"> 
* {マージン：0;パディング：0;リストスタイル型：なし;} 
A、IMG {ボーダー：0;} 
.demo {幅：544px;マージン：20ピクセル、オート。 } 
</スタイル> 

の<divクラス= "デモ"> 
	<a href='http://www.3mooc.com/' style="border:1px固体#000;"> 
		<IMGのid = "testimg"幅= "400"高さ= "564" SRC = "画像/ 132ad.jpg" ALT = ""国境= "0"> 
	</a>の
</ div> 

</ body> 
</ HTML>

第二に、プラグインのコード（プラグイン名：jquery.zoomImgRollover.js）

（関数（jQueryの）{ 

	jQuery.fn.zoomImgRollover =機能（オプション）{ 

		VARのデフォルト= { 
			パーセント：30、
			持続時間：600 
		;} 

		; varが= jQuery.extend（デフォルトは、オプション）オプト
		
		//静的ズーム機能の
		関数imageZoomStepを（ jZoomImage、X、origWidth、origHeight）
		{ 
			VAR幅=恐らくMath.round（origWidth *（0.5 +（（Xの*のopts.percent）/ 200）））* 2; 
			VAR高さ=恐らくMath.round（origHeight *（.5 +（（Xの*のopts.percent）/ 200）））* 2; 
				
			VAR左=（幅- origWidth）/ 2; 
			VARトップ=（高- origHeight）/ 2; 
		
			jZoomImage.css（{幅：幅、高さ：高さ、トップ：-top、左：-left}）; 
		} 

		this.each返す（関数（）
		{
			VAR jZoomImage = jQueryの（この）; 
			VAR origWidth = jZoomImage.width（）。
			VAR origHeight = jZoomImage.height（）。
			
			// CSSのネスを追加します。ズーム可能に
			jZoomImage.css（{位置：「相対」}）。
			jZoomImage.parent（）CSS（{オーバーフロー： "隠し"、表示： "ブロック"、位置"相対的"、幅：origWidth、高さ：origHeight}）。
			
			jZoomImage.mouseover（関数（）
			{ 
				jZoomImage.stop（）（{ダミーアニメーション：1}、{期間：opts.duration、ステップ：機能（X）
				{ 
					imageZoomStep（jZoomImage、X、origWidth、origHeight）
				）}}。
			}）; 

			jZoomImage.mouseout（関数（）
			{ 
				jZoomImage.stop（）アニメーション（{ダミー：0}、{期間：opts.duration、ステップ：
				{ 
					imageZoomStep（jZoomImage、X、origWidth、origHeight）
				}}）。
			}）; 
		}）; 
	}。

}）（jQueryの）。