jquery動畫 -- 6.制作帶鼠標和鍵盤引導功能的圖片瀏覽器

　　今天我們要介紹的jquery動畫效果是，當移動鼠標或者按鍵盤的左右鍵時，圖片走廊中的圖片向相應方向轉動。

　　先來看張效果圖，教程最后附有demo，大家可以下載。

　　首先要做的工作是創建html文本。

<div id="proximity">
        <img src="img/proximity1.jpg" alt="CH-47 Chinook" />
        <img src="img/proximity2.jpg" alt="Mi-24W" />
        <img src="img/proximity3.jpg" alt="Mil Mi-24A" />
        <img src="img/proximity4.jpg" alt="AH-1J Cobra" />
        <img src="img/proximity5.jpg" alt="Mi-24P" />
        <img src="img/proximity6.jpg" alt="AH-1Z Viper" />
        <img src="img/proximity7.jpg" alt="AH-1W Cobra" />
        <img src="img/proximity8.jpg" alt="UH-1Y Huey" />
        <img src="img/proximity9.jpg" alt="AH-64 Apache" />
        <img src="img/proximity10.jpg" alt="AH-1W Super Cobra" />
        <img src="img/proximity11.jpg" alt="MI-28 Havoc" />
        <img src="img/proximity12.jpg" alt="AH-1W Super Cobra" />
    </div>

　　內容很簡單就是一個div，里面包含12張圖片。接下來是添加css。

<style type="text/css">
    /* base classes (scripting disabled) */
    #proximity
    {
        width: 960px;
        margin: auto;
        border: 1px solid #000;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
    }
    #proximity img
    {
        border: 1px solid #000;
    }
    /* scripting enabled classes */
    #proximity.slider
    {
        width: 650px;
        height: 250px;
        position: relative;
        overflow: hidden;
    }
    .slider #scroller
    {
        position: absolute;
        left: 0;
        top: 0;
    }
    .slider #scroller img
    {
        display: block;
        width: 150px;
        height: 150px;
        margin: 50px 0 0 50px;
        float: left;
        color: #fff;
        background-color: #000;
    }
    .slider #scroller img:first-child
    {
        margin-left: 0;
    }
    #message
    {
        width: 100%;
        height: 30px;
        padding-top: 10px;
        margin: 0;
        -moz-border-radius: 0 0 8px 8px;
        -webkit-border-bottom-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        border-radius: 0 0 8px 8px;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #000;
        color: #fff;
        text-align: center;
        font: 18px "Nimbus Sans L" , "Helvetica Neue" , "Franklin Gothic Medium" , Sans-serif;
    }
</style>

　　css也很簡單，border-radius是css3新增加的屬性，可以為邊框實現圓角效果，大家可以去網上查相關的api。

　　html有了，css有了，現在就差js代碼了。首先我們是定義一些我們需要使用到的js對象。

//獲取總的容器對象
var prox = $('#proximity'),
//為圖片創建一個新的容器對象
scroller = $('<div></div>', {
    id: 'scroller'
}),
//鼠標提示信息
pointerText = 'Use your pointer to scroll, moving to the edge scrolls faster!',
//鍵盤提示信息
keyboardMessage = "Use your arrow keys to scroll the images!",
//提示信息容器，默認顯示鍵盤提示信息
message = $("<p></p>", {
    id: "message",
    text: keyboardMessage
});

//將新創建的圖片容器對象scroller添加到prox里面，讓他包含圖片
//同時將提示文本信息添加到prox里面
prox.addClass('slider').wrapInner(scroller).append(message);

//計算prox的寬度的一半，存入變量middle
var middle = prox.width() / 2;

//獲取新添加的scroller對象
scroller = $('#scroller');
//計算scroller的寬度，計算規則就是所有圖片的寬度加上他的margin-left
scroller.width(function () {
    var total = 0;
    scroller.children().each(function (i, val) {
        var el = $(this);
        total = total + (el.outerWidth() + parseInt(el.css('marginLeft')));
    });
    return total;
})
//設置圖片居中
.css('left', '-' + (scroller.width() / 2 - middle) + "px");

　　接下來是定義圖片移動函數goAnim()。

//定義圖片移動函數
function goAnim(e) {
    //獲取prox的偏移位置
    var offset = prox.offset(),
    //鼠標x軸坐標 減去 prox左偏移量 減去 prox的寬度的一半
    resetOffset = e.pageX - offset.left - middle,
    normalizedDuration = (resetOffset > 0) ? resetOffset : -resetOffset,
    //設置動畫時間，實現的效果是鼠標越靠近prox的中間，圖片運行越慢
    //鼠標越靠近prox的兩邊，圖片運行越快
    duration = (middle - normalizedDuration) * 50;

    scroller.stop().animate({
        left: (resetOffset < 0) ? 0 : -(scroller.width() - prox.width())
    }, duration, 'linear');
}

　　goAnim()通過計算鼠標的位置判斷圖片是應該向左還是向右滑動，並計算出圖片的滑動速度。為了讓大家更好的理解resetOffset，e.pageX ，offset.left ，middle這幾個對象，我畫了下面的簡圖，希望對大家有幫助。

　　接下來要做的就是要設置鼠標移動和按鍵盤相關的事件方法了。

//設置鼠標進入事件
prox.mouseenter(function (e) {
    //漸隱提示文字
    message.text(pointerText)
            .delay(1000)
            .fadeOut('slow');
    //運行移動方法
    goAnim(e);

    //設置鼠標移動事件
    prox.mousemove(function (event) {
        //運行移動方法
        goAnim(event);
    });
});

//設置鼠標移出事件
prox.mouseleave(function () {
    //鼠標移出動畫消失
    scroller.stop();
    //移出鼠標移動事件
    prox.unbind('mousemove');
});

//設置鍵盤事件
$(document).keydown(function (e) {
    //判斷是否按下鍵盤左右鍵
    if (e.keyCode === 37 || e.keyCode === 39) {
        //提示文件漸隱
        message.fadeOut('slow');

        //當前沒有動畫
        if (!scroller.is(':animated')) {
            //設置動畫效果，6秒鍾完成圖片移動到最左或最右
            //按下左鍵圖片移動到最左，按下右鍵移動到最右
            //最左是通過left:0實現的，最右是通過left: -(scroller.width() - prox.width()
            scroller.stop().animate({
                left: (e.keyCode === 37) ? 0 : -(scroller.width() - prox.width())
            }, 6000, 'linear');
        }
    }
})
//鍵盤彈起，結束動畫
.keyup(function () {
    scroller.stop();
});

　　我注釋寫的比較多，希望對大家理解代碼有幫助。有興趣的朋友可以下載demo觀看實際效果。

　　demo下載地址：jquery.animate.proximity.rar