jquery动画

6.制作带鼠标和键盘引导功能的图片浏览器

by jquery2005

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>

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;
    }

JavaScript

//获取总的容器对象
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");
//定义图片移动函数
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');
}
//设置鼠标进入事件
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');

     ...