js碰撞检测

PROMULGATOR

?

北京市通

← canvas编写背景变换

→ 本地input选择图片实时显示

相关代码

碰撞检测（原创）

元素拖动+碰撞检测

原生JS拖拽事件_碰撞检测(碰撞变色效果)

jscanvas两个矩形碰撞

检测是否引入jQuery

js方块碰撞变色

Html

Css

Js

div {
	width:100px;
	height:100px;
	position:absolute;
}
.first {
	background:red;
	left:100px;
	top:100px;
}
.second {
	background:blue;
	left:400px;
	top:100px;
}

var first1 = document.querySelector(".first");
var second1 = document.querySelector(".second");

function judgeCrash(obj) {
    this.first = obj.elem1;
    this.second = obj.elem2;
    this.fnS = obj.fnS;
    this.fnE = obj.fnE;
    this.judge = function() {
        var Stop = this.second.offsetTop;
        var Sleft = this.second.offsetLeft;
        var Ftop = this.first.offsetTop;
        var Fleft = this.first.offsetLeft;
        var minLeft = Fleft - this.second.offsetWidth;
        var maxLeft = Fleft + this.first.offsetWidth;
        var minTop = Ftop - this.second.offsetHeight;
        var maxTop = Ftop + this.first.offsetHeight;
        if (Sleft >= minLeft && Sleft <= maxLeft && Stop >= minTop && Stop <= maxTop) {
            if (this.fnS) { //判断fun有没有
                this.fnS();
                return;
            }
        }
        if (this.fnE) { //判断error有没有
            this.fnE();
        }
    }
    var fn = this.judge;
    this.first.onmousedown = function(event) {
        var t = this; //t=this.first
        console.log(t)
        var startX = event.clientX;
        var startY = event.clientY;
        var offX = t.offsetLeft;
        var offY = t.offsetTop;
        document.onmousemove = function(event) {
            var theleft = event.clientX - startX;
            var theTop = event.clientY - startY;
            fn();
            t.style.left = offX + theleft + 'px';
            t.style.top = offY + theTop + 'px';
        }
        document.onmouseup = function(event) {
            document.onmousemove = null;
        }
    }
}

judgeCrash({
    elem1: first1,
    elem2: second1,
    fnS: function() {
        console.log("Yes");

document.getElementById('one').innerHTML = 'Yes';
    },
    fnE: function() {

}
});

judgeCrash({
    elem1: second1,
    elem2: first1,
    fnS: function() {
        console.log("Yes");
        document.getElementById('one').innerHTML = 'Yes';
    },
    fnE: function() {

}
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js碰撞检测



代码描述：js标签碰撞检测

elem1:拖拽移动的标签
elem2:检测elem1是否碰撞的标签
fnS:碰撞的回调函数
one:没碰撞的回调函数

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>js碰撞检测-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号