键盘控制背景边框平滑移动（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 & ...
随机推荐
- [Z] Linux下进程的文件访问权限
原文链接:http://blog.csdn.net/chosen0ne/article/details/10581883 对进程校验文件访问权限包括两个部分,一是确定进程的角色(属于哪个用户或者组), ...
- delphi XE8 Android SDK SET
delphi XE Berlin Android SDK SET RAD>Tools>Options>SDk Manager> https://dl-ssl.google.co ...
- BurpSuite系列(十二)----User options模块(用户选择)
一.简介 User options模块主要用来配置一些常用的选项. 二.模块说明 User options主要由4个模块组成: 1.Connections 连接 2.SSL 3.Display 4 ...
- Java多线程-线程的生命周期
线程可以分为4个状态:New(新生),Runnable(可运行):为了方便分析,还可将其分为:Runnable与Running.blocked(被阻塞),Dead(死亡). 与人有生老病死一样,线程也 ...
- pyinstaller打包后运行提示找不到模块
截止到2017年9月20号,pyinstaller只支持到python3.5,如果需要支持到3.6,需要自己在github上下载pyinstaller的开发版. 在打包时候,并没有提示错误,可以顺利打 ...
- java程序员应该熟悉的20个有用的库(转)
优秀且经验丰富的Java开发人员的一个特点是API的广泛知识,包括JDK和第三方库.我花了很多时间学习API,特别是在阅读Effective Java 3rd Edition之后,Joshua Blo ...
- winfrom保存图片，将文件夹中图片放入listview，与撤回操作
之前那些操作完成对图片的修改之后,就是要保存图片了. 这里保存用到一个SaveFileDialog控件,可以获取用户选择的保存文件的路径. ) { SaveFileDialog saveImageDi ...
- 洛谷 P3659 [USACO17FEB]Why Did the Cow Cross the Road I G
//神题目(题目一开始就理解错了)... 题目描述 Why did the cow cross the road? Well, one reason is that Farmer John's far ...
- tp5循环+判断
- Source Insight： has been changed outside of Source Insight
has been changed outside of Source Insight 2018年04月26日 09:41:01 linux_c_coding_man 阅读数:247 摘自:https: ...