jQueryで画像などの要素を、画面の外に飛ばすJavaScriptです。
画像などの要素をクリックすることで、要素が画面外に飛んで消えます。
今回は真上に飛ばしましたが、飛ばす方向は八方向+ランダムを指定できます。
‘top’,‘topLeft’, ‘topRight’, ‘right’, ‘left’
‘btm’,‘btmLeft’, ‘btmRight’,‘random’
色々、試してみてくださいね。
今回使用したのは、New jQuery plugin: “Fly Off Page”です。
まず、はじめに、以下のプラグインをダウンロードしましょう。
今回使用したのは、プラグイン名:Fly Off Page 作者:James Padolsey”
↓以下が実際のソースサンプルです。
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
$("#sample").click(function(){
$(this).flyOffPage({direction:'top',retainSpace:true});
});
});
//]]></script>
<div style="margin:auto;border:1px solid #000;width:200px;padding:20px"> <img id="sample" src="rocket.png"> </div>
今回、参考にさせていただいたのは、『「日本語リファレンス」 「jquery sample」 「Index of Semooh jQuery Sample Site」』さんです。
ありがとうございます。
