html点击控制盒子左右移动,JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例...

分手后的思念是犯贱 2022-10-09 02:54 201阅读 0赞

本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动。分享给大家供大家参考，具体如下：

1. 盒子跟着鼠标移动

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Document

\*\{

margin:0;

padding:0;

div\{

width: 100px;

height: 100px;

background: red;

position: absolute;

document.οnmοusemοve=function fn(ev) \{

var event=window.event||ev;

var oDiv=document.getElementsByTagName("div");

for(x=0;x

oDiv\[x\].style.transition=(x\*0.5)+"s";

oDiv\[x\].style.left=event.clientX+"px";

oDiv\[x\].style.top=event.clientY+"px";

2. 键盘方向键控制盒子移动

div\{

width:100px;

height:100px;

background: red;

position:absolute;

left:100px;

top:100px;

transition: 0.1s;

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;

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

html点击控制盒子左右移动,JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例...

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 unity前后左右移动、鼠标控制视角、鼠标中键控制视角

相关 html点击控制盒子左右移动,JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例...

相关 javascript拖拽盒子移动的实现

相关 js 控制移动

相关 Js实现div跟着鼠标的移动

相关移动盒子——双向链表

相关 js 实现键盘控制方块移动

相关 c#控制windows 鼠标移动、点击和输入

相关 JavaScript 原生js实现鼠标拖拽移动盒子图片

相关原生js控制盒子显隐