DDR爱好者之家 Design By 杰米
本文实例为大家分享了js实现div色块碰撞的具体代码,供大家参考,具体内容如下
描述:
生成两个div色块,一个可以拖动,一个不可以,用拖动的去撞击不能动的,会将这个色块随机撞到一个位置,改变颜色。
效果:
实现:
js文件:
function DragObj(_obj) { this.obj=_obj; this.point={}; this.moveBool=false; this.obj.self=this; this.obj.addEventListener("mousedown",this.mouseHandler); this.obj.addEventListener("mouseup",this.mouseHandler); this.obj.addEventListener("mousemove",this.mouseHandler); this.obj.addEventListener("mouseleave",this.mouseHandler); } DragObj.prototype={ mouseHandler:function (e) { if(!e){ e=window.event; } if(e.type=="mousedown"){ this.self.moveBool=true; this.self.point.x=e.offsetX; this.self.point.y=e.offsetY; }else if(e.type=="mousemove"){ if(!this.self.moveBool) return; this.self.obj.style.left=(e.clientX-this.self.point.x)+"px" this.self.obj.style.top=(e.clientY-this.self.point.y)+"px" }else if(e.type=="mouseup" || e.type=="mouseleave"){ this.self.moveBool=false; } }, removeEvent:function () { this.obj.removeEventListener("mousedown",this.mouseHandler); this.obj.removeEventListener("mouseup",this.mouseHandler); this.obj.removeEventListener("mousemove",this.mouseHandler); this.obj.removeEventListener("mouseleave",this.mouseHandler); this.obj=null; this.point=null; } }; var HitTest=HitTest || (function () { return { to:function (display0,display1) { var rect=display0.getBoundingClientRect(); var rect1=display1.getBoundingClientRect(); if(rect.left>=rect1.left && rect.left<=rect1.left+rect1.width && rect.top>=rect1.top && rect.top<=rect1.top+rect1.height){ return true; } if(rect.left+rect.width>=rect1.left && rect.left+rect.width<=rect1.left+rect1.width && rect.top>=rect1.top && rect.top<=rect1.top+rect1.height){ return true; } if(rect.left>=rect1.left && rect.left<=rect1.left+rect1.width && rect.top+rect.height>=rect1.top && rect.top+rect.height<=rect1.top+rect1.height){ return true; } if(rect.left+rect.width>=rect1.left && rect.left+rect.width<=rect1.left+rect1.width && rect.top+rect.height>=rect1.top && rect.top+rect.height<=rect1.top+rect1.height){ return true; } } } })(); var LoadImg=LoadImg || (function () { return { load:function (listSrc,callBack) { this.callBack=callBack; this.listSrc=listSrc; this.num=0; this.imgArr=[]; var img=new Image(); img.addEventListener("load",this.loadHandler.bind(this)); img.src=listSrc[0]; }, loadHandler:function (e) { if(!e){ e=window.event; } e.currentTarget.removeEventListener ("load",this.loadHandler.bind(this)); this.imgArr[this.num]=e.currentTarget; if(this.num==this.listSrc.length-1){ this.callBack(this.imgArr) return; } var img=new Image(); this.num++; img.addEventListener("load",this.loadHandler.bind(this)); img.src=this.listSrc[this.num]; } } })();
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 200px; position: absolute; } </style> <script src="/UploadFiles/2021-04-02/dragObj.js">以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
2024年04月18日
2024年04月18日
- 黎明诗.1994-真的挂念你【EMI百代】【WAV+CUE】
- 田震《同名专辑 宝丽金唱片台湾版》[WAV+CUE][510MB]
- 谭艳《遗憾 DSD版》[WAV+CUE][440MB]
- 蔡琴《伤心小站》[WAV+CUE][300MB]
- 暴雪战网国服绑定的身份证能改吗 暴雪绑定身份证更改方法
- dnf巴卡尔团本机制
- 魔兽世界PLUS防战P3毕业装是什么 魔兽世界防战P3毕业装解析
- 红馆40·草蜢《三人主义演唱会》2CD[低速原抓WAV+CUE]
- 红馆40·谭咏麟《谭咏麟84演唱会》2CD[低速原抓WAV+CUE]
- 吴克群2000-一个人的Tomorrow[EMI百代][WAV+CUE]
- RNG直播需付费观看登热搜 还推出了1999元会员卡
- 新垣结衣出演《超级马里奥兄弟:惊奇》CM:在线游玩篇
- NS《轩辕剑7》开启预售 首发九折258港币
- 群星.2024-花间令电视剧原声带【TME影音】【FLAC分轨】
- 羽泉.2011-@自己【巨匠文化】【WAV+CUE】