鼠标移动一个块与另一个块进行碰撞检测_鼠标与图像碰撞-优快云博客

本文链接：https://blog.youkuaiyun.com/w12111w/article/details/77915053

这篇博客介绍了一个利用jQuery实现的鼠标移动碰撞检测的示例。通过监听鼠标按下和移动事件，动态改变橙色块的位置，并检测其是否与黄色块发生碰撞。当两块重叠时，黄色块背景变为红色，否则恢复为黄色。代码中详细注释了每个关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}

.show{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;

}
p{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 300px;
left: 300px;
}
</style>
</head>
<body>

<div class="show"></div>
<p></p>

</body>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">

//因为需要用到event.client获取鼠标坐标，所以要传一个event
$('.show').on('mousedown',function (event) {
//鼠标点距离拖拽块边缘的距离
var disX = event.clientX - $('.show').offset().left;
var disY = event.clientY - $('.show').offset().top;
$('.show').on('mousemove',function (event) {
var Left = (event.clientX-disX)+'px';
var Top = (event.clientY-disY)+'px';

$('.show').css({'marginTop':Top,'marginLeft':Left});
console.log(Left);
console.log(Top);

// if(Left>='100px' && Left<='400px' && Top>='100px' && Top<='400px' ){
// $('p').css({'backgroundColor':'red'});
// }else{
// $('p').css({'backgroundColor':'yellow'});
// }

if($('p').offset().left <= $('.show').width()+$('.show').offset().left && $('.show').offset().left <= $('p').width()+$('p').offset().left && $('p').offset().top <= $('div').height()+$('.show').offset().top && $('.show').offset().top<= $('p').height()+$('p').offset().top){
$('p').css({'backgroundColor':'red'});
}else{
$('p').css({'backgroundColor':'yellow'});
}
});

});

//鼠标抬起
$(document).on('mouseup',function () {
//清除鼠标移除标签
$('.show').off('mousemove');
})

</script>
</html>