[JS]ページを表示した時にパネルをするっと表示するスクリプト

広告掲載などに最適なパネルをページの下部からアニメーションで表示するスクリプトをEmanuele Feronatoから紹介します。

Create a dynamic content animated footer ad for your site in just 9 jQuery lines
デモページ

デモではページを表示した際に、下部からパネルがアニメーションでスライドしながら表示されます。
パネルはスクロールしても定位置に固定表示されており、非表示にするには「Close」をクリックします。

実装は簡単で、</body>の直前にパネル用のdiv要素を配置します。

HTML

<div id="triqui_ad"></div>

</body>

パネルに表示する内容は外部ファイルで処理しています（広告用だから？）。下記のJavaScriptの「ajax.php」が外部ファイルです。

スクリプトのベースにはjQueryが利用されており、下記のシンプルなスクリプトで実装されています。

JavaScript

	$(document).ready(function(){
		$.ajaxSetup({cache:false});
		$('#triqui_ad').wrap('
<div id="triqui_container"></div>

');
		$('#triqui_ad').load('ajax.php',function(){
			$('#triqui_ad').css('display','block');
			$('#triqui_container').hide().slideDown('slow');
			$('#triqui_ad').append(' • <a id="triqui_ad_close">Close</a> ');
			$('#triqui_ad_close').click(function(){
	   			$('#triqui_container').slideUp('slow');
	  		});
		});
	});

Post on:2010年3月5日