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

サイト構築 -JavaScript

Post on:2010年3月5日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

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

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

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

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

HTML

<textarea name="code" class="html" cols="60" rows="5">
<div id="triqui_ad"></div>
</body>
</textarea>

</body>

</textarea>

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

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

JavaScript

<textarea name="code" class="js" cols="60" rows="5">
	$(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(' &bull; <a id="triqui_ad_close">Close</a> ');
			$('#triqui_ad_close').click(function(){ 
	   			$('#triqui_container').slideUp('slow'); 
	  		}); 
		}); 
	});
</textarea>