今天同事让我看了一个动画效果，是由键盘控制背景边框平滑移动，我感觉挺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. Normalize.css与Reset CSS：定义浏览器统一的默认样式

    今天在chrome上测试我的网页,发现一个<p>段落多出了一些margin,而我自己没有设定.打开f12调试,发现在一个“user agent style”栏下定义了这个margin,去g ...

  2. MySQL多项模糊查询

    最近有个需求,就是要根据搜索框里面的关键字,找到符合条件的数据. 如果是单个条件的话,其实就是一个普通的select语句. 但是需求是这个关键字,要在id,desc,step等多个字段模糊查找. 然后 ...

  3. TCP粘包拆包基本解决方案

    上个小节我们浅析了在Netty的使用的时候TCP的粘包和拆包的现象,Netty对此问题提供了相对比较丰富的解决方案 Netty提供了几个常用的解码器,帮助我们解决这些问题,其实上述的粘包和拆包的问题, ...

  4. e8000051

    Unable to install package (e8000051). Please check used certificate validity and provisioning.. Unab ...

  5. Spring cloud Eureka高可用 - Windows 7 hosts文件立即生效

    hosts 文件所在位置 c:/windows/system32/drivers/etc/hosts 左下角 搜索框 搜索 cmd 弹出命令框 输入 ipconfig /displaydns 显示所有 ...

  6. ELK 日志管理系统，再次尝试记录

    简介: 第二次尝试 ELK 记录... 工作流程: 1.客户端的 Logstash 将日志信息采集到之后传输给 Redis 做消息队列 2.然后服务端的 Logstash 将日志从 Redis 中取出 ...

  7. 拼接sql

    String whereArgs = taskTable + " where 1=1 "; if (upCheck) { whereArgs += " and type ...

  8. Presto资源组配置

    { "rootGroups": [ { "name": "global", "softMemoryLimit": &qu ...

  9. Linux实战教学笔记23:Inotify事件监控工具

    第二十三节 inotify事件监控工具 标签(空格分隔): Linux实战教学笔记-陈思齐 ---本教学笔记是本人学习和工作生涯中的摘记整理而成,此为初稿(尚有诸多不完善之处),为原创作品,允许转载, ...

  10. java tomcat报错: Starting Tomcat v7.0 Server at localhost' has encountered a problem问题

    运行web项目的时候出现下面错误: 出现这个问题的原因是 这个tomcat在其他项目中正在运行 关掉即可.