键盘控制背景边框平滑移动（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 & ...
随机推荐
- 【Kettle】Java借助Kettle将Excel导入数据
示例功能(仅供测试): 在JAVA项目中,将数据从Excel文件导入数据库中.实现该能有多种方法,而本例则是“不走寻常路”,尝试借助Kettle实现数据导入. 原理: Java中调用存储在Kettle ...
- MongoDB出现CPU飚高，如何强制停止正在执行的操作
如果发出了一个执行耗时很长的任务给MongoDB服务器,客户端强制终止会导致任务依然在服务器端执行. 这时MongoDB提供了查询和管理正在执行任务的方式. // db.currentOp() 获得当 ...
- xmlhttp的OnReadyStateChange事件
这两天抽空升级了一下自己做的pon资料表,增加了OLT拓扑自动发现以及业务从MSE至OLT的全自动下发 等功能,让人没想到的是在处理xmlhttp回调时死活接收不到反馈信息, 在Excel论坛和微软官 ...
- addClass()使用方法
含义:为元素添加指定的样式名 具体用法分为以下两种: 1.可以一次添加一个或者多个用空格隔开的样式名 例: <script> $("ul li").addClass(& ...
- C#中打开设计视图时报"未将对象引用设置到对象的实例"
通常情况下,若是你将用户控件写好了放入窗体中,若是有不合理的代码,则会弹出错误提示框,不让你放.若是你之前只是随便加了一个用户控件,并且没有什么问题,但后来你又把控件改坏掉了,那么你打开就会报错(在窗 ...
- python 数值计算库
pip install numpy pip install matplotlib pip install sklearn yum -y install tkinter pip install scip ...
- Alpha混合
ShaderLab syntax: Blending 混合 Blending is used to make transparent objects. 混合是用来制作透明物体的. When graph ...
- 钉钉开发笔记(三)MySQL的配置
最近在编写web的过程中,经常需要与后台工作人员互动.由于比较麻烦.没有效率. 就果断的请教了,公司的后台大牛,学习下数据库的一些简单操作,现在就把利用MySQL连接服务器, 进行可视化操作的简单步骤 ...
- C#异步中的Task,async,await
class Program { static void Main(string[] args) { Console.WriteLine("我是主线程,线程ID:{0}", Thre ...
- appium desktop v1.2.7在android7.0上运行报错“Error: Error executing adbExec”
1.参考下面链接,https://stackoverflow.com/questions/42283921/unable-to-run-appium-tests-on-android-7-0:得知需要 ...