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

本文实例讲述了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程序设计有所帮助。