使用jQuery用键盘去控制图片移动

首先我们放两张图片设置一下样式：width:100px;height:100px;position:absolute;再给它们分别一个类img1和img2；这样我们就简单的设置好了。
我们先用if语句写：

首先我们要在键盘事件里面写代码，所以我们先写一个键盘事件$(window).keydown(function (e) {})这个键盘事件里面需要传一个参数，我们要用这个参数来接收从外界传过来的信息。
我们要声明四个变量分别为top，left，top1，left1；并且用parseInt（）的方法将其转化成数字，在括号里我们要获取两张图片的top值和left值，分别赋值给对应的变量，

var top = parseInt($(".img1").css("top"));

var left = parseInt($(".img1").css("left"));

var top1 = parseInt($(".img2").css("top"));

var left1 = parseInt($(".img2").css("left"));我们先用if else语句的方法来写：

if (e.keyCode ==87) {}判断传进来的实参的键盘码是否是等于87，如果是就设置类名为img2的图片的css样式的top值为top1-5；$(".img2").css("top", top1 - 5 );
else if (e.keyCode == 83) {}否则如果传进来的实参的键盘码是否是等于83，如果是就设置类名为img2的图片的css样式的 left 值为left1-5；$(".img2").css("left", left1 - 5);
else if(e.keyCode==65){} 否则如果传进来的实参的键盘码是否是等于83，如果是就设置类名为img2的图片的css样式的 top 值为top1+5；$(".img2").css("top", top1 + 5);
else if (e.keyCode == 68) {}否则如果传进来的实参的键盘码是否是等于83，如果是就设置类名为img2的图片的css样式的 left 值为left1+5；$(".img2").css("left", left1 + 5);这样第一种if else语句的方法就写完了。
现在我们用switch的方法来写：switch (e.keyCode) {}，用switch的方法我们需要在括号里写一个判断条件，这个判断条件就是键盘码。
Switch里面的写法为：case 判断条件:判断正确后要执行的代码；break;这样我们只需把我们的键盘的放在判断条件的位置，再将我们对应的代码写在冒号后面再在这句代码后面写上break;就好了，break;的意思是如果代码在第一个case就判断成功执行完了这里面的代码就不再往后面执行了，直接跳出所有的判断。
这样我们把我们要用的那八个键盘码都写上去，我们就可以用这八个键来控制两张图片的上下左右了，这样我们的用键盘去控制图片移动就完成了.让我们来看效果：

首先是没有效果的图片：

再是被移动了的图片：

最后再给你们写一个简单的九九乘法表吧。

我们要让他显示再页面上，所以我们先写一的div，我们不需要给它设置任何样式（如果你想设置也可以）好了我们现在开始吧。

1.我们再简写的ready事件里面写，首先我们写一个for循环，在循环条件里声明一个变量i=1，i小于10，最后让i自加，再到for循环里面再套一个for循环，也在循环条件里声明一个变量j=1，再让j<=i，最后让j自加，这就写好了一个for嵌套.

2.我们再在最里面的for循环中声明一个变量js，将i*j赋值给它，我们在让我们的乘法表在页面上显示，所以我们要用字符串形式拼接起来，$(document.write(j + "*" + i + "=" + js + "      "));&nbsp；是一个字符实体表示空格，还有很多字符实体：

显示结果	描述	实体名称	实体编号
	空格	&nbsp；
<	小于号	<	<
>	大于号	>	>
&	和号	&	&

等等，还有一些我们不常用的，最后我们在最里面的for循环里面再写一个判断，条件为j==i，如果条件成立就让其换行，document.write("<br>");这样我们的九九乘法表就完成了。效果如下：

使用jQuery用键盘去控制图片移动相关推荐

mfc 怎么让键盘上下左右控制图片移动_[源码和文档分享]基于MFC的陨石撞飞机游戏设计与实现...
摘要用MFC设计一个陨石撞飞机的平面游戏,陨石不断下落,飞机通过键盘的上下左右键移动以躲避陨石.当陨石撞到飞机时,显示游戏结束提示对话框.设计开始要对开发环境VC 6.0的熟悉,需要学会如何添加资 ...
java 使用itext 导出pdf 控制图片的大小
在使用itext 导出pdf 的过程中,可能会遇到这样的需求,就是导出文字加图片.使用我们前面写的程序,确实是可以导出图片,如果针对于类似简历的需求,图片填充单元格,会满足效果,如下图所示: 但在实际 ...
JQuery键盘控制图片
JQuery键盘控制图片 <html><head><meta charset="UTF-8"><title></title&g ...
jQuery可悬停控制图片轮播
2019独角兽企业重金招聘Python工程师标准>>> 图片轮播相信很多人你也见过,各大网站上基本上都有,那么究竟是怎么实现的呢?不废话,直接上代码: <div id=&quo ...
基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览源码下载实现的代码: <div id= ...
php js 图片旋转,jQuery实现可以控制图片旋转角度效果
本文实例讲述了jQuery实现可以控制图片旋转角度效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下:/p> "http://www.w3.org/TR/xhtm ...
jquery版相片墙（鼠标控制图片聚合和散开）
jquery版相片墙(鼠标控制图片聚合和散开) 原文:jquery版相片墙(鼠标控制图片聚合和散开) 照片墙,简单点说就是鼠标点击小图片时,聚合变成一张大图片:点击大图片时,散开变成小图片.这个是我一 ...
java 怎么让图片运动,小编给你传授java怎么实现键盘控制图片移动
电脑现已成为我们工作.生活和娱乐必不可少的工具了,在使用电脑的过程中,可能会遇到java怎么实现键盘控制图片移动的问题,如果我们遇到了java怎么实现键盘控制图片移动的情况,该怎么处理怎么才能解决ja ...
[C#]键盘↑↓←→控制图片加速移动
想做简单游戏的同学们可以学习一下. [C#]键盘控制图片移动(10秒) 源码 using System; using System.Drawing; using System.Windows.Form ...

使用jQuery用键盘去控制图片移动

使用jQuery用键盘去控制图片移动

使用jQuery用键盘去控制图片移动相关推荐

最新文章

热门文章