互聯網 - 大數據

這里仿照GANESH的例子利用JQuery和一些第三方的庫做了一個Lavalamp的效果，苦惱的是由于要引用第三方的js，沒有辦法在博客里給大家直接秀出效果來！只能辛苦大家去GANESH查看lavalamp的效果，這里先給大家展示一個截圖：

當鼠標移動的時候，陰影會隨著移動并顯示動態的效果，具體實現方法如下：

首先，我們構建基本的HTML元素：

<ul class="lavaLamp">
            <li><a href="#">Home</a></li>
            <li><a href="#">Plant a tree</a></li>
            <li><a href="#">Travel</a></li>
            <li><a href="#">Ride an elephant</a></li>
 </ul>
<ul>與<li>是通常構建菜單的方式，<ul>用來代表一個菜單，<li>用來代表具體的菜單項，事實上我們還有另外一個<li>用來表示當前菜單項，這個我們會通過后臺的javascript腳本來添加。

<li class="back"><div class="left"></div></li>

/* Styles for the entire LavaLamp menu */
.lavaLamp {
    position: relative;
    height: 29px; width: 421px;
    background: url("../image/bg.gif") no-repeat top;
    padding: 15px; margin: 10px 0;
    overflow: hidden;
}
    /* Force the list to flow horizontally */
    .lavaLamp li {
        float: left;
        list-style: none;
    }
        /* Represents the background of the highlighted menu-item. */
        .lavaLamp li.back {
            background: url("../image/lava.gif") no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            .lavaLamp li.back .left {
                background: url("../image/lava.gif") no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        /* Styles for each menu-item. */
        .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            text-transform: uppercase;
            font: bold 14px arial;
            color: #fff; outline: none;
            text-align: center;
            height: 30px; top: 7px;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 10px;
        }
 這段代碼可以直接放在html畫面里或者單獨的CSS文件里，我們首先使用background: url("../image/bg.gif") no-repeat top;給菜單<ul>添加背景，并設置了一些其他的基本屬性，比如height, width, padding, margin等等。

接著，設置<li>的樣式，通過float: left，我們可以控制菜單項橫向顯示而不是豎向顯示，緊接著設置了顯示當前項的<li>的CSS，這里使用了一種叫做SlidingDoors的CSS技術，之后的文章里我會給大家詳細解釋。

最后，我們針對錨點的樣式進行了設置

第三項，我們開始添加Javascript腳本，這里的訣竅是基于Jquery之上，我們使用了兩個第三方的library，lavalamp以及Easing，你只需要添加一行代碼就可以實現動態的menu的效果：

<script type="text/javascript">
    $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>