利用js键盘事件制作会移动效果
Posted 暗恋桃埖源
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用js键盘事件制作会移动效果相关的知识，希望对你有一定的参考价值。
会移动的方块
描述 按键盘上的方向键方块会移动，按住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键盘事件制作会移动效果的主要内容，如果未能解决你的问题，请参考以下文章