键盘控制背景边框平滑移动（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="data:images/img1.jpg"/></a></li>
<li><a href="#"><img src="data:images/img1.jpg"/></a></li>
<li><a href="#"><img src="data:images/img1.jpg"/></a></li>
<li><a href="#"><img src="data:images/img1.jpg"/></a></li>
<li><a href="#"><img src="data:images/img1.jpg"/></a></li>
<li><a href="#"><img src="data:images/img1.jpg"/></a></li>
<li><a href="#"><img src="data:images/img1.jpg"/></a></li>
<li><a href="#"><img src="data: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);
}
}
})
})
虽然我现在写的都是一些很简单的代码，但是我还是想通过这种方式来提升自己。里面的文字叙述太少，我会慢慢加强的，争取下次能再好一点。
键盘控制背景边框平滑移动（jquery）的更多相关文章
- 键盘控制div移动
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...
- JS实现用键盘控制DIV上下左右+放大缩小与变色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于VHDL利用PS2键盘控制的电子密码锁设计
基于VHDL利用PS2键盘控制的密码锁设计 附件:下载地址 中文摘要 摘 要:现代社会,人们的安全意识正在不断提升.按键密码锁由于其具有方便性.低成本等特征,还是大有用武之地的.但是通常的按键密码锁开 ...
- 用键盘控制DIV && Div闪烁
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- 【Unity3D】使用鼠标键盘控制Camera视角（即时战略类游戏视角）：缩近，拉远，旋转
今天写一个demo,要用到鼠标键盘控制三维视角,因此写了个脚本用于控制. 该脚本可以用于即时战略类游戏的视角,提供了缩进,拉伸,旋转.同时按住鼠标右键不放,移动鼠标可以实现第一人称视角的效果. usi ...
- 求s=a+aa+aaa+aaaa+aa...a的值，其中a是一个数字。例如2+22+222+2222+22222(此时共有5个数相加)，几个数相加有键盘控制。
package com.lw.HomeWork1;//包名 2 import java.util.Scanner; public class Demo18 { /** * @param args */ ...
- js键盘控制div移动，解决停顿问题
问题版本代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <html> &l ...
- OpenGL之路（八）加入�光照效果和键盘控制
在opengl中加入�光照的效果,可用键盘控制放大缩小 w键放大 s键缩小 d键开关灯 预览效果例如以下: 源代码例如以下: #include <gl/glut.h> #include & ...
随机推荐
- Android 4 学习（20）：ActionBar
参考<Pro Android 4.0> ActionBar 11.0之后,ActionBar在Activity中默认存在,可以在代码中设置其显示与否: ActionBar actionBa ...
- 检测客户端系统-PHP
if(isset($_SERVER['HTTP_USER_AGENT'])) { $userAgent = strtolower($_SERVER['HTTP_USER_AGENT']); $clie ...
- cmd使用代理
- Tomcat集群---Cluster节点配置
<!-- Cluster(集群,族) 节点,如果你要配置tomcat集群,则需要使用此节点. className 表示tomcat集群时,之间相互传递信息使用那个类来实现信息之间的传递. cha ...
- ElasticSearch如何新增字段
/index/type/_mapping post { "properties": { "zy_renwu_pingjia": { "type&qu ...
- Mysql事务及行级锁
事务隔离级别 数据库事务隔离级别,只是针对一个事务能不能读取其它事务的中间结果. Read Uncommitted (读取未提交内容) 在该隔离级别,所有事务都可以看到其他未提交事务的执行结果.本隔离 ...
- k8s secret
https://kubernetes.io/docs/concepts/configuration/secret/ Secret是一个包含少量敏感数据的对象,例如密码,令牌或密钥. 否则,这些信息可能 ...
- Linux实战教学笔记30：Nginx反向代理与负载均衡应用实践
1.1 集群简介 简单地说,集群就是指一组(若干个)相互独立的计算机,利用高速通信网络组成的一个较大的计算机服务系统,每个集群节点(即集群中的每台计算机)都是运行各自服务的独立服务器.这些服务器之间可 ...
- Python基础：字符串的常见操作
# 切片 # 切片 获取对象中一部分数据 [起始位置:结束位置(不包含):步长] qpstr = "山东张学友" result = qpstr[1: 3: 1] # 东张 prin ...
- 为什么要用Android Studio?
为什么要用Android Studio 本书节选自<Android Studio实用指南> 作者: 毕小朋 目前本书已上传到百度阅读,在百度中搜索[Anroid Studio实用指南]便可 ...