您的位置：首页 > Web前端 > JQuery

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

2013-12-05 15:54 405 查看

今天同事让我看了一个动画效果，是由键盘控制背景边框平滑移动，我感觉挺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);
}
}

})

})

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航