注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

ㄨiao愛

转载技术文档

 
 
 

日志

 
 

碰撞检测  

2012-09-19 23:10:20|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
不匹配的情况
l1,r1,t1,b1 红块
l2,r2,t2,b2 蓝块

1.r1<l2    红的右1<蓝的左1
碰撞检测 - 513394217 - ㄨiao愛
 

2.l1>r2 红的左1>蓝的右1
碰撞检测 - 513394217 - ㄨiao愛

3.t1>b2 红的上1>蓝的下2
碰撞检测 - 513394217 - ㄨiao愛

4.b1<t2 红的下1<蓝的上1
碰撞检测 - 513394217 - ㄨiao愛



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;z-index:2;}
#div2 {width:100px; height:100px; background:yellow; position:absolute; left:230px; top:220px; z-index: 1; }
#div3 {width:100px; height:100px; background:green; position:absolute;}
</style>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    var oDiv2=document.getElementById('div2');
    oDiv.onmousedown=function (ev) {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;

        document.onmousemove=function(ev) {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            var t=oEvent.clientY-disY;

            var l1=oDiv.offsetLeft;
            var r1=oDiv.offsetLeft+oDiv.offsetWidth;
            var t1=oDiv.offsetTop;
            var b1=oDiv.offsetTop+oDiv.offsetHeight;

            var l2=oDiv2.offsetLeft;
            var r2=oDiv2.offsetLeft+oDiv2.offsetWidth;
            var t2=oDiv2.offsetTop;
            var b2=oDiv2.offsetTop+oDiv2.offsetHeight;

            if (r1<l2 || l1>r2 || t1>b2 || t2>b1) {
                oDiv2.style.background='yellow';
            }else{
                oDiv2.style.background='green';
            }

            if(l<0){
                l=0;
            }else if(l>document.documentElement.clientWidth-oDiv.offsetWidth-50){
                l=document.documentElement.clientWidth-oDiv.offsetWidth;
            }

            if(t<0){
                t=0;
            }else if(t>document.documentElement.clientHeight-oDiv.offsetHeight-50){
                t=document.documentElement.clientHeight-oDiv.offsetHeight;
            }

            oDiv.style.left=l+"px";
            oDiv.style.top=t+"px";
            return false;
        }

        document.onmouseup=function(ev) {
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }
};

</script>
</head>

<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
  评论这张
 
阅读(290)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018