好资源导航 » 文章资讯 » js实现上下左右键盘控制div移动

js实现上下左右键盘控制div移动

2023-08-03 00:37:04 309

本文实例为大家分享了js上下左右键盘控制div移动的具体代码，供大家参考，具体内容如下

描述：

div通过键盘事件上下左右实现div块的移动

效果：

实现：

js：

varMethod=(function(){
return{
EVENT_ID:"event_id",
loadImage:function(arr){
varimg=newImage();
img.arr=arr;
img.list=[];
img.num=0;
//如果DOM对象下的事件侦听没有被删除掉，将会常驻堆中
//一旦触发了这个事件需要的条件，就会继续执行事件函数
img.addEventListener("load",this.loadHandler);
img.self=this;
img.src=arr[img.num];
},
loadHandler:function(e){
this.list.push(this.cloneNode(false));
this.num++;
if(this.num>this.arr.length-1){
this.removeEventListener("load",this.self.loadHandler);
varevt=newEvent(Method.EVENT_ID);
evt.list=this.list;
document.dispatchEvent(evt);
return;
}
this.src=this.arr[this.num];
},
$c:function(type,parent,style){
varelem=document.createElement(type);
if(parent)parent.appendChild(elem);
for(varkeyinstyle){
elem.style[key]=style[key];
}
returnelem;
},
divColor:function(){
varcol="#";//这个字符串第一位为#颜色的格式
for(vari=0;i<6;i++){
col+=parseInt(Math.random()*16).toString(16);//rondom*16后的随机值即为0-1*16==0-16;toString(16)为转化为16进制
}
returncol;//最后返回一个七位的值格式即为#nnnnnn颜色的格式
},
random:function(min,max){
max=Math.max(min,max);
min=Math.min(min,max);
returnMath.floor(Math.random()*(max-min)+min);
},
dragElem:function(elem){
elem.addEventListener("mousedown",this.mouseDragHandler);
elem.self=this;
},
removeDrag:function(elem){
elem.removeEventListener("mousedown",this.mouseDragHandler);
},
mouseDragHandler:function(e){
if(e.type==="mousedown"){
e.stopPropagation();
e.preventDefault();
document.point={x:e.offsetX,y:e.offsetY};
document.elem=this;
this.addEventListener("mouseup",this.self.mouseDragHandler);
document.addEventListener("mousemove",this.self.mouseDragHandler);
}elseif(e.type==="mousemove"){
this.elem.style.left=e.x-this.point.x+"px";
this.elem.style.top=e.y-this.point.y+"px";
}elseif(e.type==="mouseup"){
this.removeEventListener("mouseup",this.self.mouseDragHandler);
document.removeEventListener("mousemove",this.self.mouseDragHandler);
}
}
}
})();

html：





Title

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

js实现上下左右键盘控制div移动

热门推荐

随机推荐