键盘控制背景边框平滑移动（jquery）

今天同事让我看了一个动画效果，是由键盘控制背景边框平滑移动，我感觉挺cool，所以我自己也动手制作了一个。目的是为了锻炼自己，看自己是否也能在短时间内实现。

　　先上图：

一、html代码

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" href="../reset.css"/>
        <script type="text/javascript" src="../jquery-1.10.2.js"></script>
        <style type="text/css">
            .box {width: 544px; height: 680px;  margin: 20px auto;}
            .tab {position: relative;  }
            .tab ul li {position: relative; float: left; margin: 20px; display: table-cell;}
            .highLight {display: none; position: absolute; width: 154px; height: 197px;background: url("images/chose.png") no-repeat;}
            .tab ul li a img{ width: 138px; height: 181px; vertical-align: middle; display:table-cell;vertical-align:middle;}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="tab">
                <ul>
                    <li><a href="#"><img src="images/img1.jpg"/></a></li>
                    <li><a href="#"><img src="images/img1.jpg"/></a></li>
                    <li><a href="#"><img src="images/img1.jpg"/></a></li>
                    <li><a href="#"><img src="images/img1.jpg"/></a></li>
                    <li><a href="#"><img src="images/img1.jpg"/></a></li>
                    <li><a href="#"><img src="images/img1.jpg"/></a></li>
                    <li><a href="#"><img src="images/img1.jpg"/></a></li>
                    <li><a href="#"><img src="images/img1.jpg"/></a></li>
                </ul>
                <div class="highLight"></div>   <!-- 高亮显示的背景图片 -->
            </div>
        </div>

    </body>
</html>

二、js代码

$(function(){
                    var liHeight = $(".tab ul li").outerHeight(true);   /* li长度 */
                    var liWidth = $(".tab ul li").outerWidth(true); /* li宽度 */
                    var liCount = $(".tab").find("li").length;  /* li总个数 */

                    var i = 0;  /* 判断li是否为第一次鼠标事件 */
                    var index = 0;
                    $(".tab ul li").mouseover(function(){
                        index = $(this).index();    /* 判断li为第几个数，从0开始 */
                        var offsetLeft = $(this).offset().left - $(".box").offset().left - 8;   /* 为移动图片左边距离，减去8是因为图片原因 */
                        var offsetTop = $(this).offset().top - $(".box").offset().top - 8;  /* 为移动图片上边距离，减去8是因为图片原因 */
                        if(i==0){
                            $(".highLight").css({left: offsetLeft,top: offsetTop}).show();
                        }else if(i>0){
                            $(".highLight").animate({left: offsetLeft,top: offsetTop},300);
                        }
                        i++;
                    })

                    var rowCount = 3;   /* 每行显示图片的个数 */
                    var j = 0;
                    $(window).keydown(function(event){
                        var val = event.which;
                        switch(val){
                            case(37):/* 键盘左键 */
                                if(index>0){
                                    index = index-1;
                                }
                                var offsetLeft = $(".tab ul li").eq(index).offset().left - $(".box").offset().left - 8;
                                var offsetTop = $(".tab ul li").eq(index).offset().top - $(".box").offset().top - 8;
                                if(index>=0){
                                    $(".highLight").animate({left: offsetLeft,top: offsetTop},300);
                                }
                            break;

                            case(38):/* 键盘上键 */
                                if((index-rowCount)>=0){
                                    index = index - rowCount;
                                    var offsetLeft = $(".tab ul li").eq(index).offset().left - $(".box").offset().left - 8;
                                    var offsetTop = $(".tab ul li").eq(index).offset().top - $(".box").offset().top - 8;
                                    $(".highLight").animate({left: offsetLeft,top: offsetTop},300);
                                }
                            break;

                            case(39):/* 键盘右键 */
                                if(j==0){
                                    $(".highLight").css({left: "12px",top: "12px"}).show();
                                }else if(j>0){
                                    if(index<(liCount-1)){
                                        index = index+1;
                                    }
                                    var offsetLeft = $(".tab ul li").eq(index).offset().left - $(".box").offset().left - 8;
                                    var offsetTop = $(".tab ul li").eq(index).offset().top - $(".box").offset().top - 8;
                                    if(index<liCount){
                                        $(".highLight").animate({left: offsetLeft,top: offsetTop},300);
                                    }
                                }
                                j++;
                            break;

                            case(40):/* 键盘下键 */
                                if((index+rowCount)<liCount){
                                    index = index + rowCount;
                                    var offsetLeft = $(".tab ul li").eq(index).offset().left - $(".box").offset().left - 8;
                                    var offsetTop = $(".tab ul li").eq(index).offset().top - $(".box").offset().top - 8;
                                    $(".highLight").animate({left: offsetLeft,top: offsetTop},300);
                                }
                        }

                    })

                })

虽然我现在写的都是一些很简单的代码，但是我还是想通过这种方式来提升自己。里面的文字叙述太少，我会慢慢加强的，争取下次能再好一点。