今天同事让我看了一个动画效果，是由键盘控制背景边框平滑移动，我感觉挺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
);
}
}
})
})
虽然我现在写的都是一些很简单的代码，但是我还是想通过这种方式来提升自己。里面的文字叙述太少，我会慢慢加强的，争取下次能再好一点。
转载于:https://www.cnblogs.com/tattoo/p/3459707.html
相关资源：数据结构—成绩单生成器
