jQuery Floating Layer Plugin

在許多網站設計中,浮動圖層(Floating Layer)經常被應用在較長的網頁文件中,以呈現能隨著瀏覽器的捲軸移動的浮動廣告或選單。

Floating Layer Plugin 是以 jQuery 原型物件(Prototype Object)為基礎所擴充的外掛程式庫。相較於先前版本,這次的版本除了將程式碼最佳化外,也增添了若干的新功能。

makeFloating( [options] )
透過元素選取(Selector)將特定的 DOM 元素封裝為具有 jQuery 函式功能的外覆物件後,你可以呼叫此函式來建立自訂的浮動圖層。函式可以接受傳遞物件參數來提供選項設定屬性,如以下所示:
屬性型別說明
positionobject指定 x 和 y 屬性來控制浮動區塊的定位方式。除了絕對座標來定位外,你也可以在 x 軸指定 "left"、"right"、"center" 決定水平位置,在 y 軸指定 "top"、"bottom"、"center" 來決定垂直位置。
範例:
  • {x:0, y:250}
  • {x:'right', y:'top'}
durationnumber指定動畫的顯示速度,以毫秒為單位。
easingstring指定變速移動的特效。
fixedboolean指定是否要固定圖層位置而不隨捲軸移動。

應用範例
首先,除了必要的 jQuery 程式庫外,你還需要下載本程式庫並引入到你的網頁中。然後,在網頁的文件的主體中加入區塊圖層,如以下範例:
<div id="floatlayer" style="
width: 50px;
height: 50px;
border: solid 1px #cccccc;
background-color: #d0d0ff;
z-index: 100;
display: none">
<!-- Place your content here -->
</div>

接下來,你可以處理 jQuery 的 DOM ready 事件,在網頁載入完成後,選取如上的圖層元素並叫用 makeFloating 函式:
$(document).ready(function() {
$('#floatlayer').makeFloating();
});

在預設的情況下,浮動圖層會配合網頁的可見區域以水平置左、垂直置中的方式定位,且會隨瀏覽器的捲軸移動產生擺動(Swing)的動畫效果。如果要變更浮動圖層的預設行為,你可以透過物件參數提供自訂的選項設定。如以下範例會建立水平置右、垂直置中,並加入線性(Linear)動畫效果的浮動圖層:
$('#floatlayer').makeFloating({
position: { x: 'right', y: 'center' },
easing: 'linear'
});

因為程式所表現的動畫效果是透過 jQuery 的 animate 函式來實現,所以 easing 參數只能支援內建的 linearswing 兩種特效。如果內建的動畫效果不能符合你的期望,建議你可以搭配 Easing Plugin 來擴增多種慢入(Easing In)和慢出(Easing Out)的動畫效果,如以下範例就使用了更為順暢的慢出特效:
$('#floatlayer').makeFloating({
position: { x: 'right', y: 'center' },
easing: 'easeOutBounce'
});

當然,如果你不需要動態移動的效果,你也可以透過物件參數的 fixed 屬性來固定圖層的位置:
$('#floatlayer').makeFloating({
position: { x: 'right', y: 'center' },
fixed: true
});

另外,程式庫還提供 floatingPosition 函式,讓你可以在建立浮動圖層物件後,重新定位浮動的目標位置,如以下範例:
$('#floatlayer').floatingPosition({ x: 'center', y: 'center' });


Download jquery.floatinglayer.zip


Share/Save/Bookmark

3 comments :: jQuery Floating Layer Plugin

  1. hi 這真是很不錯的外掛
    使用至今我遇到兩個問題。
    第一,在 makeFloating 之後,如果在某些狀況下需要暫停物件的移動? 有辦法嗎?

    第二,是否有辦法在物件被 makeFloating 時,保持原來位置,而不是從 document 的 (0,0) 開始移動?
    我知道這是因為從 relative -> absolute 造成的,但是我不想要每次重載瀏覽器就看到物件從左上角飛入。

    感謝您的開發。

  2. To LVCHEN:
    謝謝您的提問。如果已經產生浮動圖層,除了重新定位外,尚不支援重設其他選項參數。但如果要從圖層的原始位置開始移動,你可以在叫用 makeFloating 函式前,試著加入如下的程式碼:
    var pos = $('#floatlayer').position();
    $('#floatlayer').css({ left: pos.left + 'px', top: pos.top + 'px' });

  3. 你好~~不小心看到這篇,用了一下發現還蠻方便的

    但我有遇到一個小問題,我用google chrome瀏覽器
    然後用下方的 code 會無法靠右 (在IE是正常的~)

    $('#floatlayer').makeFloating({
    position: { x: 'right', y: 'center' },
    easing: 'linear'
    });

張貼留言