標籤：getc 分析 || 移動 form down nod ase --
會移動的方塊
描述 按鍵盤上的方向鍵方塊會移動，按住alt鍵和方向鍵進行大幅度移動
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>會移動的方塊（按方向鍵或alt加方向鍵）</title> <style> * {margin: 0;padding: 0;} div {width: 200px;height: 200px;position: absolute;background:cyan;} </style> <script> /* 分析 左 對應的鍵碼keyCode：37 上 對應的鍵碼keyCode：38 右 對應的鍵碼keyCode：39 下 對應的鍵碼keyCode：40 */ window.onload = function(){ var oDiv = document.getElementById(‘div‘); window.onkeydown = function(ev){ var e = ev || window.event; //alert(e.keyCode);//查看鍵碼 var speed = 10; //每次變化的數 //判斷是否按下alt鍵,如果按下每次增加的數度翻十倍 if(e.altKey){ speed *= 10; } switch(e.keyCode){ //左 case 37: //擷取當前的有效值,擷取的值有單位px 用parseInt轉換成整型（去掉單位） var current = parseInt(getStyle(oDiv, ‘left‘)); //每次有效樣式減10px oDiv.style.left = current - speed + ‘px‘; break; //上 case 38: //擷取當前的有效值,擷取的值有單位px 用parseInt轉換成整型（去掉單位） var current = parseInt(getStyle(oDiv, ‘top‘)); //每次有效樣式減10px oDiv.style.top = current - speed + ‘px‘; break; //右 case 39: //擷取當前的有效值,擷取的值有單位px 用parseInt轉換成整型（去掉單位） var current = parseInt(getStyle(oDiv, ‘left‘)); //每次有效樣式加10px oDiv.style.left = current + speed + ‘px‘; break; //下 case 40: //擷取當前的有效值,擷取的值有單位px 用parseInt轉換成整型（去掉單位） var current = parseInt(getStyle(oDiv, ‘top‘)); //每次有效樣式加10px oDiv.style.top = current + speed + ‘px‘; break; } } } /*------封裝擷取當前有效樣式的函數---------*/ function getStyle(node, styleType){ return node.currentStyle ? node.currentStyle[styleType] : getComputedStyle(node)[styleType]; } /*------封裝擷取當前有效樣式的函數end---------*/ </script></head><body> <div id="div"></div></body></html>
瀏覽器效果：
纔此基礎上插入一個背景圖加以修飾
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>會移動的鳳凰（按方向鍵或alt加方向鍵）</title> <style> * {margin: 0;padding: 0;} div {width: 293px;height: 220px;position: absolute;background:url(fenghuang1.gif);} </style> <script> /* 分析 左 對應的鍵碼keyCode：37 上 對應的鍵碼keyCode：38 右 對應的鍵碼keyCode：39 下 對應的鍵碼keyCode：40 */ window.onload = function(){ var oDiv = document.getElementById(‘div‘); window.onkeydown = function(ev){ var e = ev || window.event; //alert(e.keyCode);//查看鍵碼 var speed = 10; //每次變化的數 //判斷是否按下alt鍵,如果按下每次增加的數度翻十倍 if(e.altKey){ speed *= 10; } switch(e.keyCode){ //左 case 37: //擷取當前的有效值,擷取的值有單位px 用parseInt轉換成整型（去掉單位） var current = parseInt(getStyle(oDiv, ‘left‘)); //每次有效樣式減10px oDiv.style.left = current - speed + ‘px‘; //按下 左時 div第transform 都等於 逆時針180度 oDiv.style.transform = ‘rotate(-180deg)‘; break; //上 case 38: //擷取當前的有效值,擷取的值有單位px 用parseInt轉換成整型（去掉單位） var current = parseInt(getStyle(oDiv, ‘top‘)); //每次有效樣式減10px oDiv.style.top = current - speed + ‘px‘; //按下 上時 div第transform 都等於 逆時針90度 oDiv.style.transform = ‘rotate(-90deg)‘; break; //右 case 39: //擷取當前的有效值,擷取的值有單位px 用parseInt轉換成整型（去掉單位） var current = parseInt(getStyle(oDiv, ‘left‘)); //每次有效樣式加10px oDiv.style.left = current + speed + ‘px‘; //按下 右時 div第transform 都等於 逆時針0度 oDiv.style.transform = ‘rotate(0deg)‘; break; //下 case 40: //擷取當前的有效值,擷取的值有單位px 用parseInt轉換成整型（去掉單位） var current = parseInt(getStyle(oDiv, ‘top‘)); //每次有效樣式加10px oDiv.style.top = current + speed + ‘px‘; //按下 右時 div第transform 都等於 順時針90度 oDiv.style.transform = ‘rotate(90deg)‘; break; } } } /*------封裝擷取當前有效樣式的函數---------*/ function getStyle(node, styleType){ return node.currentStyle ? node.currentStyle[styleType] : getComputedStyle(node)[styleType]; } /*------封裝擷取當前有效樣式的函數end---------*/ </script></head><body> <div id="div"></div></body></html>
瀏覽器效果：
使用到的圖片：
利用js鍵盤事件製作會移動效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
