键盘去控制图片移动"/>

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

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

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

1. 首先我们要在键盘事件里面写代码，所以我们先写一个键盘事件$(window).keydown(function (e) {})这个键盘事件里面需要传一个参数，我们要用这个参数来接收从外界传过来的信息。
2. 我们要声明四个变量分别为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语句的方法来写：

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

首先是没有效果的图片：

             再是被移动了的图片：

                             

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

我们要让他显示再页面上，所以我们先写一的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; &nbsp;"));&nbsp；是一个字符实体表示空格，还有很多字符实体：

显示结果	描述	实体名称	实体编号
	空格	&nbsp；	 
<	小于号	&lt;	&#60;
>	大于号	&gt;	&#62;
&	和号	&amp;	&#38;

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