Fly Off Page 實際執行畫面

Fly Off Page 可以讓使用者把不要看或已經不需要的網頁元素利用滑鼠或鍵盤事件從網頁中移除，讓移除網頁元素的過程可以變得有趣一些，這一個套件是基於 jQuery 框架所做成可擴充性高，可設定元素飛出的方向和速度並且忽視原本網頁元素佔用空間。

使用方法：
首先載入程式所需要的 JavaScript 程式碼
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//Fly Off Page 主程式碼
<script type="text/javascript" src="jquery.flyoffpage.min.js"></script>

上圖範例中所使用到的CSS語法
ul {background: #333;border: 1px solid #777;padding: 20px 0 20px 20px;margin: 0 auto;overflow: hidden; height:1%;}
li {display: inline;float: left;}
img {margin: 0 20px 0 0;}

最後加上 JavaScript 就完成了
$('li').dblclick(function(){
    $(this).flyOffPage({
        retainSpace: {
            height: 0,
            width: 0,
            margin: 0
        },
        tween: {
            opacity: 0
        }
    });
    return false;
});

附上可修改的參數值

參數	說明
duration	動畫的過場時間 單位為毫秒
direction	動畫飛出去的方向可設定為 top(上),right(右),btm(下),left(左),topLeft(左上),topRight(右上),btmLeft(左下),btmRight(右下),random(隨機)
tween	自行設定補間動畫
retainSpace	可設定為 true false 或一個對象,補間動畫所占用的對象

作者網站：http://james.padolsey.com/
檔案大小：2 KB
檔案下載：http://james.padolsey.com/demos/jQueryPlugin-flyOffPage/jquery.flyoffpage.min.js
檔案備份：下載