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