SQLの窓

2014年03月16日


jQuery : IFRAME 作成プラグインと、アニメーションによる表示切替

IFRAME を作成するプラグインです。引数は、URL と幅と高さですが、プラグイン部分に引数を追加すれば容易に変更できます。

iframe メソッド で動的に IFRAME を作成しています。一度作成すれば、中の URL の変更は、iframeChange メソッドで行います。

iframeChange メソッドでは、animation メソッドを使用して、表示の切り替えとしてフェードアウトからフェードインを行っています。

animate の連鎖は、jQuery のドキュメント通りに、jQuery のチェーンで行われます。この際、オプションの queue  がデフォルトで true なので正しく動作しますが、false にしてしまうと動作しないので注意して下さい。

最初のアニメーションの終了後、done イベントで次の URL への変更を行っています。通常の complete イベントでも動作しますが、done イベント内では、アニメーションのプロパティやオプションが参照可能です。

▼ 実装のコード
<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script>
$.fn.extend({ 
	iframe: function(url,w,h){
		this.html("");

		// IFRAME 作成
		var obj = document.createElement("iframe");
		obj.src = url
		$(obj).attr("frameBorder", "0");
		$(obj).attr("scrolling", "no");
		$(obj).css("position ", "relative");
		$(obj).css("width", w+"px");
		$(obj).css("height", h+"px");
		this.append(obj);
		return this;
	},
	iframeChange: function(url,w,h){
		this.animate({ opacity: 0 },
		{
			duration: 1500, easing: "swing",
			done: function(animation) {
				console.dir(animation.props);
				console.dir(animation.opts);
				$(this).iframe(url,w,h);
			}
		})
		.animate({ opacity: 1 },		{
			duration: 3000, easing: "swing",
			done: function(animation) {
				console.dir(animation.props);
				console.dir(animation.opts);
			}
		});
	}  
});

$(function(){
	$("#iframe_base").iframe("https://lh3.googleusercontent.com/-YEY-LGIec58/Uq78JcmXG_I/AAAAAAAARs4/Cq8VdOEe1TA/s500/freefont_hanko_kana014.png",500,500)
});

</script>
<input type="button" value="変更" onclick='$("#iframe_base").iframeChange("https://lh5.googleusercontent.com/-qU5uL1LvaM8/UtN7Rhtr3RI/AAAAAAAASEY/tglCi9sGuf8/s250/_img.png",250,250)'> <input type="button" value="戻す" onclick='$("#iframe_base").iframeChange("https://lh3.googleusercontent.com/-YEY-LGIec58/Uq78JcmXG_I/AAAAAAAARs4/Cq8VdOEe1TA/s500/freefont_hanko_kana014.png",500,500)'>
<div id="iframe_base"></div>



【プラグイン作成(jQuery)の最新記事】
posted by lightbox at 2014-03-16 16:05 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり