小球碰撞-获取坐标

来源：互联网发布：淘宝的观复博物馆编辑：程序博客网时间：2024/06/16 19:43

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width:200px;
height: 200px;
background-color: pink;
/*margin-left: 100px;
margin-top: 100px;*/
border-radius: 100px;
}
p{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 500px;
top:200px;
border-radius: 50px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>

</div>
<p></p>
</body>
<script src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
//坐标点相对于整个文档边缘

$('div').on('mousedown',function(event){
// console.log(event.clientX);//x方向坐标
//console.log(event.clientY);//y方向坐标
// $('div').eq(0).css({'marginTop':''+event.clientX+''});
// $('div').eq(0).css({'marginLeft':''+event.clientY+''});
//鼠标点距离拖拽块边缘的距离
var Dx=event.clientX-($('div').offset().left);
var Dy=event.clientY-($('div').offset().top);

$('div').on('mousemove',function(event){
var _left=(event.clientX-Dx);
var _top=(event.clientY-Dy);

$('div').css({'marginTop':_top+'px','marginLeft':_left+'px'});

if($('p').offset().left<=$('div').width()+$('div').offset().left &&
$('div').offset().left<=$('p').width()+$('p').offset().left &&
$('p').offset().top<=$('div').height()+$('div').offset().top&&
$('div').offset().top<=$('p').height()+$('p').offset().top
){
$('p').css({'backgroundColor':'red'});
$('p').html('撞到我了');
}else{
$('p').css({'backgroundColor':'yellow'});
$('p').html('来撞我啊');
}

AJAX

});

});

//鼠标抬起移除事件
$(document).on('mouseup',function(){
$('div').off('mousemove');
});

</script>
</html>

阅读全文

0 0