2
420<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
ul{padding:0;margin:0;}
#tp{height:50px;width:310px;margin：0 auto;list-style:none;}
.tps{height:40px;width:60px;float:left;text-align:center;background:#e4393c;line-height:40px;margin-right:1px;
}
.container{height:500px;width:600px;background:#ccc;margin:0 auto;}
.container ul{list-style:none;height:300px;width:500px;margin:0 auto;}
.inner{height:40px;width:59px;float:left;text-align:center;background:#666;line-height:40px;margin-right:1px;
margin-top:1px;position:relative;
}
</style>
<script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>
<p class="container">
<ul id="tp">
<li class="tps">关于我</li>
<li class="tps">你好</li>
<li class="tps">信息</li>
<li class="tps">服务</li>
<li class="tps">假期</li>
</ul>
<ul>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
</ul>
<script>
$('.tps').each(function(){
$(this).mousedown(function(){
var e=window.event||arguments[0];
var posX = $(this).offset().left;
var posY = $(this).offset().top;
var nd = $(this);
$(document).on('mousemove',function(){
var e=window.event||arguments[0];
nd.css({'left':(e.clientX-posX +'px'),'position':'relative'});
nd.css('top', (e.clientY-posY+'px'));
var ndn =$('.inner');
var t1 = e.clientY-posY;
var b1 = t1 + $('.tps').height();
var l1 = e.clientX-posX ;
var r1 = l1 + $('.tps').width();
var inns = document.getElementsByClassName('inner');
for(var i = 0 ;i<inns.length;i++){
var t2 = inns[i].style.top;
var b2 = inns[i].width + t2;
var l2 = inns[i].style.left;
var r2 = inns[i].style.left+l2;
if(r1<l2||l1>r2||b1<b2||t1>b2){
inns[i].style.backgroundColor = 'blue';
}else{
inns[i].style.backgroundColor = 'yellow';
}
}
})
$(document).on('mouseup',function(){
$(document).unbind('mousedown');
![图片描述][1] $(document).on('mouseup',null);
})
})
})
</script>
</p>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
.tips 这个dom节点在哪里？
你这个代码习惯...我好想帮你修改，可是工作量太大...，算了；
说下你的问题inns[i].style.top，这种只能取到行间样式，
console.log(t2)就可以知道了...
修改下：
你可以打开chrome看下控制台里的元素style，
你下面的li根本没有top,left，那怎么识别两个物体之间的碰撞？？？？