Lava Lamp 模擬

Lava lamp 模擬


執行效果：

當滑鼠滑到表單時，下方有個指標會跟著移動


如果下方游標移動不正常，請再重新整理。因為上面案例並沒有把 jQuery 寫入 $(window).load(function() { }); 內，而是寫在 jQuery(document).ready(function(){ }); ，在某些瀏覽器下，例如 chrome，可能會在圖片載入完畢前就已經偵測圖片的錯誤位置。
實作上請寫入 $(window).load(function() { }); 內，或使用 deferred 判斷圖片載入是否完成。

程式重點：
1. 如何使用 jQuery 取得 menu 小圖示的相對位置
2. menu 小圖示的位置可紀錄在陣列、或 .data() 內、或物件內
    因位置不會變動，可紀錄在 .data() 內(避免全域名稱汙染－－濫用或名稱衝突)，此處是偷懶省步驟，所以紀錄在陣列。
    這步驟是設計關鍵絕竅，將 menu 位置或寬度紀錄下來，當滑鼠移入或移出某表單時，讀取紀錄值後移動位置。
3. 如何設計 menu 小圖示的 position



CSS

#wrapper {
        position: relative;
        float: right;      /* 靠右，隨便靠 */
        right: 10%;     /* 隨心設定 */
        width: 210px;   /* 所有MENU小圖示都可容納顯示即可 */
        height: 90px;    /* 若沒設定高度，滑鼠移過時 MENU 會變高，造成下方區塊內容往下移 */
        border: 1px solid black;  /* 可省略 */
}

#mainmenu img {
        position: relative;   /* 方便你取得各 image 相對位置用 */
        overflow: hidden;
}
#menuhover {
        position: relative;
        display: none;
}

HTML

<div id="wrapper">
        <div id="mainmenu">
                <img src="/photo/p01.png">
                <img src="/photo/p02.png">
                <img src="/photo/p03.png">
                <img src="/photo/p04.png">
        </div>
        <img id="menuhover" src="/photo/mousepointer.gif">
</div>

jQuery

var aryPosX = [];
$('#mainmenu img').each(function(){   
        aryPosX.push($(this).position().left);   
});   
$('#mainmenu img').mouseenter(function(){   
        var idx = $(this).index();    // 取得 img 在 #mainmenu 的位置順序，值為 0、1、2、3，配合從 aryPosX 陣列內取值   
        $('#menuhover')   
               .show()
               .stop(true, false)    // 注意這裡的 stop 設定   
               .animate({ 'left': aryPosX[idx] });   
});

通常實作上，會在圖片載入完畢後才去偵測圖片位置，你可以將上段程式碼寫在 $(window).load(function() { }); 內。 或使用 jQuery 的 deferred 判斷圖片是否載入完畢。 執行結果：
jsfiddle 看效果
jsfiddle 看效果
你可以自己修改程式碼後直接按 RUN 看看能不能跑(不要 update)。


請注意，在某些瀏覽器下，例如 chrome，須將 jsfiddle.net 的左側的 onDomReady 改為 onLoad，才能正常顯示。



國外範例(下方長條圖或背景方框變動也是類似道理。)
‧LavaLamp for jQuery lovers
‧CSS+Javascript power. Fancy menu
‧Simple Lava Lamp Menu Tutorial with jQuery