本文實例講述了JS實現盒子跟著鼠標移動及鍵盤方向鍵控制盒子移動。分享給大家供大家參考，具體如下：
1. 盒子跟著鼠標移動
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin:0; padding:0; } div{ width: 100px; height: 100px; background: red; position: absolute; } </style></head><body><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><script> document.onmousemove=function fn(ev) { var event=window.event||ev; var oDiv=document.getElementsByTagName("div"); for(x=0;x<oDiv.length;x++){ oDiv[x].style.transition=(x*0.5)+"s"; oDiv[x].style.left=event.clientX+"px"; oDiv[x].style.top=event.clientY+"px"; } }</script></body></html>2. 鍵盤方向鍵控制盒子移動
<html><head> <meta charset="utf-8" /> <style type="text/css"> div{ width:100px; height:100px; background: red; position:absolute; left:100px; top:100px; transition: 0.1s; } </style> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); var left = false; var right = false; var top = false; var bottom = false; document.onkeydown = function(ev){ var oEvent = ev || event; var keyCode = oEvent.keyCode; switch(keyCode){ case 37: left=true; break; case 38: top=true; break; case 39: right=true; break; case 40: bottom=true; break; } }; setInterval(function(){ if(left){ oDiv.style.left = oDiv.offsetLeft-10+"px"; }else if(top){ oDiv.style.top = oDiv.offsetTop-10+"px"; }else if(right){ oDiv.style.left = oDiv.offsetLeft+10+"px"; }else if(bottom){ oDiv.style.top = oDiv.offsetTop+10+"px"; } },50); document.onkeyup = function(ev){ var oEvent = ev || event; var keyCode = oEvent.keyCode; switch(keyCode){ case 37: left=false; break; case 38: top=false; break; case 39: right=false; break; case 40: bottom=false; break; } } } </script></head><body><div id="div1"></div></body></html>感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試一下運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript頁面元素操作技巧總結》、《JavaScript操作DOM技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
