今天同事让我看了一个动画效果，是由键盘控制背景边框平滑移动，我感觉挺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); } } }) })
虽然我现在写的都是一些很简单的代码，但是我还是想通过这种方式来提升自己。里面的文字叙述太少，我会慢慢加强的，争取下次能再好一点。