html键盘控制一串元素移动,【案例】使用上下左右键控制元素的移动

使用键盘上下左右键控制小球移动

margin:0;

padding:0;

}

#ball{

width: 200px;

height: 200px;

background: pink;

border-radius: 50%;

position: absolute;

}

//获取元素

var ball = document.getElementById('ball');

//定义小球每次移动的步径

var step = 1;

//定义小球水平、垂直方向移动定时器标志

var runX,runY;

//为使小球运行更流畅，加入水平移动定时器

function moveX(step){

console.log(runX);

if(runX){

return;

}

runX = setInterval(function(){

var newLeft = ball.offsetLeft + step;

var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

if(newLeft <= 0){

newLeft = 0;

}

if(newLeft >= clientWidth - ball.offsetWidth){

newLeft = clientWidth - ball.offsetWidth;

}

ball.style.left = newLeft + 'px';

},5);

}

//为使小球运行更流畅，加入垂直移动定时器

function moveY(step){

if(runY){

return;

}

runY = setInterval(function(){

var newTop = ball.offsetTop + step;

var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

if(newTop <= 0){

newTop = 0;

}

if(newTop >= clientHeight - ball.offsetHeight){

newTop = clientHeight - ball.offsetHeight;

}

ball.style.top = newTop + 'px';

},5);

}

//键盘按键按下时小球移动

window.onkeydown = function(e){

//兼容性写法

var e = e || window.event;

//使用switch结构判断键盘按下的是哪个键

switch(e.keyCode){

case 37:

moveX(-step);

break;

case 38:

moveY(-step);

break;

case 39:

moveX(step);

break;

case 40:

moveY(step);

break;

}

//键盘按键抬起时，小球停止移动

window.onkeyup = function(){

//清除定时器

clearInterval(runX);

runX = undefined;

clearInterval(runY);

runY = undefined;

}

html键盘控制一串元素移动,【案例】使用上下左右键控制元素的移动相关推荐

html屏蔽上下左右键控制页面,【案例】使用上下左右键控制元素的移动
使用键盘上下左右键控制小球移动 *{ margin:0; padding:0; } #ball{ width: 200px; height: 200px; background: pink; bord ...
java 上下键_用键盘的上下左右键控制JAVA SWING UI中的组件的移动等事件 | 学步园...
用键盘的上下左右键控制JAVA SWING UI中的组件的移动等事件 import java.awt.*; import java.awt.event.*; import javax.swing.*; ...
Unity中C#代码学习用wasd和上下左右键控制物体前后左右上下移动和绕轴旋转
Unity中C#代码学习用wasd和上下左右键控制物体前后左右上下移动和绕轴旋转 using System.Collections; using System.Collections.Generic; ...
上下左右键控制ultraGrid单元格数据的移动
在项目中的一些录入页面,用户要求当填写完一个数据时根据上下左右键来移动光标,可以不用点击鼠标而输入下一个单元格的数据,从而提高工作效率.根据分析,这个功能可以通过ultraGrid的KeyDown事件 ...
unity3d中上下左右键控制移动
using UnityEngine; using System.Collections; public class MoveByADSW : MonoBehaviour { //人物状态public ...
从键盘输入一串连续的数字，判断输出是否为电话号码
从键盘输入一串连续的数字,判断输出是否为电话号码.(可以自行设定137/138/139等等,但是长度固定) import java.util.Scanner;public class main {pu ...
5.29 C语言练习（计算数字个数：从键盘输入一串字符，输出字符串里的数字字符数。）
[练习] 题目要求:从键盘输入一串字符,输出字符串里的数字字符数. #include "stdio.h" int main() {char a[100];int i,num=0;g ...
汇编“从键盘输入一串字符，分别统计其中字母、数字和其
'从键盘输入一串字符,分别统计其中字母.数字和其他字符的个数,并输出显示." 不知道哪里错了.请帮忙看一下,谢谢 DATA SEGMENT STR2 DB 'abcd543@' LEN EQ ...
plc控制伺服电机四轴攻丝机案例(包含伺服接线图)
plc控制伺服电机四轴攻丝机案例(包含伺服接线图) 该程序为plc控制伺服电机的工程案例程序,包含伺服电机接线图,包含程序流程的详细解释说明可. 程序包括伺服电机的启动,停止,原点定位,回归原点,位 ...

html键盘控制一串元素移动,【案例】使用上下左右键控制元素的移动

html键盘控制一串元素移动,【案例】使用上下左右键控制元素的移动相关推荐

最新文章

热门文章