键盘控制背景边框平滑移动（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 & ...
随机推荐
- Bresenham画线算法
[Bresenham画线算法] Bresenham是一种光栅化算法.不仅可以用于画线,也可以用用画圆及其它曲线. 通过lower与upper的差,可以知道哪一个点更接近线段: 参考:<计算机图形 ...
- 【CodeForces148D】Bag of mice
题意 dragon和princess玩一个游戏.开始的时候袋子里有w个白老鼠和b个黑老鼠.两个人轮流从袋子里面往外摸老鼠.谁先拿到白老鼠谁先获胜.dragon每次抓出一只老鼠,剩下老鼠里面都会有一只跳 ...
- WebPack 从安装到闲置
序言:各种技术在研究过程中常常会出现在实际工作中难以实施的情况,于是就慢慢闲置,但学毕竟还是必须要学学的,就看能用到多少,至少开拓了眼界,谨以此安慰下那些学完又闲置的技术~ 跑题结束,以下开始正式配置 ...
- zabbix结合grafana
一.下载grafana 下载地址: http://docs.grafana.org/installation/rpm/ https://s3-us-west-2.amazonaws.com/grafa ...
- CloudStack + KVM + HA
KVM高可用性CS4.2暂时没有实现 The Linux Kernel Virtual Machine (KVM) is a very popular hypervisor choice amongs ...
- Linux hostname主机名配置文件与文件 /etc/hosts解析（copy来的，原作者看到了别打我）
1.关于/etc/host,主机名和IP配置文件 Hosts - The static table lookup for host name(主机名查询静态表) hosts文件是Linux系统中一个负 ...
- Oracle Nested table、Record
1.如何在PL/SQL中创建和使用Nested table;2.如何在PL/SQL中创建和使用Record; 1.如何在PL/SQL中创建和使用Nested table DECLARE /**创建一个 ...
- 使用Intellij中的Spring Initializr来快速构建Spring Boot/Cloud工程
在之前的所有Spring Boot和Spring Cloud相关博文中,都会涉及Spring Boot工程的创建.而创建的方式多种多样,我们可以通过Maven来手工构建或是通过脚手架等方式快速搭建,也 ...
- Mybatis：动态sql
动态 SQL MyBatis 的强大特性之一便是它的动态 SQL.如果你有使用 JDBC 或其他类似框架的经验,你就能体会到根据不同条件拼接 SQL 语句有多么痛苦.拼接的时候要确保不能忘了必要的空格 ...
- bootstrap小图标引用方法
<span class="glyphicon glyphicon-search"></span> <span class="glyphico ...