使用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; &nbsp;"));&nbsp；是一個字符實體表示空格，還有很多字符實體：

顯示結果	描述	實體名稱	實體編號
?	空格	&nbsp；	 
<	小于號	&lt;	&#60;
>	大于號	&gt;	&#62;
&	和號	&amp;	&#38;

等等，還有一些我們不常用的，最后我們在最里面的for循環里面再寫一個判斷，條件為j==i，如果條件成立就讓其換行，document.write("<br>");這樣我們的九九乘法表就完成了。效果如下：

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

總結

以上是生活随笔為你收集整理的使用jQuery用键盘去控制图片移动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。