今天同事让我看了一个动画效果，是由键盘控制背景边框平滑移动，我感觉挺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）的更多相关文章

  1. 键盘控制div移动

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  2. JS实现用键盘控制DIV上下左右+放大缩小与变色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 基于VHDL利用PS2键盘控制的电子密码锁设计

    基于VHDL利用PS2键盘控制的密码锁设计 附件:下载地址 中文摘要 摘 要:现代社会,人们的安全意识正在不断提升.按键密码锁由于其具有方便性.低成本等特征,还是大有用武之地的.但是通常的按键密码锁开 ...

  4. 用键盘控制DIV && Div闪烁

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  6. 【Unity3D】使用鼠标键盘控制Camera视角（即时战略类游戏视角）：缩近，拉远，旋转

    今天写一个demo,要用到鼠标键盘控制三维视角,因此写了个脚本用于控制. 该脚本可以用于即时战略类游戏的视角,提供了缩进,拉伸,旋转.同时按住鼠标右键不放,移动鼠标可以实现第一人称视角的效果. usi ...

  7. 求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 */ ...

  8. 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 ...

  9. OpenGL之路（八）加入�光照效果和键盘控制

    在opengl中加入�光照的效果,可用键盘控制放大缩小 w键放大 s键缩小 d键开关灯 预览效果例如以下: 源代码例如以下: #include <gl/glut.h> #include & ...

随机推荐

  1. RabbitMQ_direct

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ @version: @author: morgana @licens ...

  2. 【Oracle】Oracle改变日志归档模式

    一.确认工作模式:   1.查询V$DATABASE      SQL>select log_mode from v$database;      归档日志:ARCHIVELOG     2.执 ...

  3. keil5破解

    没有破解之前的keil只能编译限制大小的代码,72K好像我忘了?太长的话会报错. 注册机网址:http://bbs.armfly.com/read.php?tid=2346 1.在keil5左上角的F ...

  4. 使用Spring MVC创建 REST API--2

    1.提供资源之外的其他内容 @ResponseBody提供了一种很有用的方式,能够将控制器返回的Java对象转换为发送到客户端的资源表述.实际上,将资源表述发送给客户端只是整个过程的一部分.一个好的R ...

  5. 高并发下redis缓存穿透问题解决方案

    一.使用场景 我们在日常的开发中,经常会遇到查询数据列表的问题,有些数据是不经常变化的,如果想做一下优化,在提高查询的速度的同时减轻数据库的压力,那么redis缓存绝对是一个好的解决方案. 二.需求 ...

  6. keepalived + nginx实现高可用

    1. Keepalived介绍 Keepalived是一个基于VRRP协议来实现的服务高可用方案,可以利用其来避免IP单点故障,类似的工具还有heartbeat.corosync.pacemaker. ...

  7. python安装库(Windows下)

    首先确保安装了pip,并且pip也加入了系统path路径: pip下载:https://pypi.python.org/pypi/pip#downloads 下载Python对应的包:(http:// ...

  8. 【原】Coursera—Andrew Ng机器学习—Week 11 习题—Photo OCR

    [1]机器学习管道 [2]滑动窗口 Answer:C ((200-20)/4)2 = 2025 [3]人工数据 [4]标记数据 Answer:B (10000-1000)*10 /(8*60*60) ...

  9. 后端生成二维码 - C#生成二维码（QR）

    最近在github上找到一个相对比较好的C#二维码生成类库.在这里和大家分享一下. github地址:https://github.com/codebude/QRCoder 把解决方案下载下来,编译生 ...

  10. Flume NG 配置详解

    配置 设置代理 Flume代理配置存储在本地配置文件.这是一个文本文件格式,是Java属性文件格式.在相同的配置文件,可以指定一个或多个代理的配置.配置文件包括每个源,接收器和通道,把它们连接在一起, ...