<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

div{width:100px;

    height:100px;

}

#box{background:red; position:absolute; }

#box1{background:green;position:absolute;top:300px; left:300px;}

</style>

<script>

//两个碰撞的盒子。是建立在一个不动的基础上。所以可以根据不动的盒子求出四个方向的left和top值。然后再判断其是否碰撞，且碰撞的过程随时改变其层级，（原需 var 8个变量，现在只需4个变量）

function collText(obj,left,top,obj1){

            var l1=obj.offsetLeft-obj.offsetWidth;

            var t1=obj.offsetTop-obj.offsetHeight;

            var r1=obj.offsetLeft+obj.offsetWidth;

            var b1=obj.offsetTop+obj.offsetHeight;

            if(left<l1||top<t1||left>r1||top>b1){

                obj.style.zIndex=;

                obj1.style.zIndex=;

                return true;

            }else{

                obj.style.zIndex=;

                obj1.style.zIndex=;

                return false;

            }

};

window.onload=function(){

    var oBox=document.getElementById('box');

    var oBox1=document.getElementById('box1');

    oBox.onmousedown=function(ev){

        var oEvent= ev   ||    event;

        var disX=oEvent.clientX-oBox.offsetLeft;

        var disY=oEvent.clientY-oBox.offsetTop;

        document.onmousemove=function(ev){

            var oEvent= ev  ||    event;

            var l=oEvent.clientX-disX;

            var t=oEvent.clientY-disY;

            oBox.style.left=l+'px'    ;

            oBox.style.top=t+'px'    ;

            if(collText(oBox1,l,t,oBox)){

                oBox1.style.background='green';

            }else{

                oBox1.style.background='yellow';

            }

        };

        document.onmouseup=function(){

            document.onmousemove=null;

            document.onmouseup=null;

            oBox.reseaseCapture&&oBox.reseaseCapture();

        };

        oBox.setCapture&&oBox.setCapture();

        return false;

    }

    oBox1.onmousedown=function(ev){

        var oEvent= ev ||    event;

        var disX1=oEvent.clientX-oBox1.offsetLeft;

        var disY1=oEvent.clientY-oBox1.offsetTop;

        document.onmousemove=function(ev){

            var oEvent= ev ||    event;

            var le=oEvent.clientX-disX1;

            var to=oEvent.clientY-disY1;

            oBox1.style.left=le+'px'    ;

            oBox1.style.top=to+'px'    ;

            if(collText(oBox,le,to,oBox1)){

                oBox.style.background='red';

            }else{

                oBox.style.background='#000';

            }

        };

        document.onmouseup=function(){

            document.onmousemove=null;

            document.onmouseup=null;

            oBox1.reseaseCapture&&oBox1.reseaseCapture();

        }

        oBox1.setCapture&&oBox1.setCapture();

        return false;

    }

}

</script>

</head>

<body>

<div id="box"></div>

<div id="box1"></div>

</body>

</html>

js原生碰撞检测的更多相关文章

  1. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  2. JS原生效果瀑布流布局的实现(一)

    JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  3. 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  4. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  5. js原生的url操作函数，及使用方法。（附：下边还有jquery对url里的中文解码函数）

    js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...

  6. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  7. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  8. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  9. js原生 + jQuery实现页面滚动字幕

    js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...

随机推荐

  1. TexturePacker大图还原成小图工具带源码

    TexturePacker是一个把好多小图打成大图的软件,生成的是大图以及小图在大图位置的.plist描述文件,但是不支持把大图还原成小图.网上偷的图一般都是大图和plist,想得到小图比较麻烦,于是 ...

  2. GCD基础知识总结

    iOS三种多线程编程技术: 1.NSThread 2.NSOperation 3.GCD(Grand Central Dispatch) 从上到下,抽象度层次从低到高,抽象度越高的使用越简单,也是Ap ...

  3. OC 类方法,对象方法,构造方法以及instancetype和id的异同

    OC 类方法,对象方法,构造方法以及instancetype和id的异同 类方法: 类方法是可以直接使用类的引用,不需要实例化就可以直接使用的方法.一般写一些工具方法. 类方法: 声明和实现的时候,以 ...

  4. GitHub Top 100 的项目(iOS)

    主要对当前 GitHub 排名前 100 的项目做一个简单的简介, 方便初学者快速了解到当前 Objective-C 在 GitHub 的情况. Android 版本的在此: https://gith ...

  5. [转]android笔记--Intent和IntentFilter详解

    Intent用于启动Activity, Service, 以及BroadcastReceiver三种组件, 同时还是组件之间通信的重要媒介. 使用Intent启动组件的优势1, Intent为组件的启 ...

  6. intelliJ idea代码折叠

    在intelliJ idea中不仅可以对类.方法等结构的代码进行折叠(ctrl+-)还可以自定义折叠代码.intelliJ支持两种风格的自定义代码折叠,如下: visual studio style ...

  7. 【转发】NPAPI开发详解，Windows版

    NPAPI开发详解,Windows版 9 jiaofeng601, +479 9人支持,来自Meteor.猪爪.hanyuxinting更多 .是非黑白 .Yuan Xulei.hyolin.Andy ...

  8. 查看ORACLE的实际执行计划

    ORACLE的执行计划分为预估执行计划和实际执行计划.其中,你用Toad.PL/SQL Developer.SQL Developer.EXPLAIN PLAN FOR或者SET ATUOTRACE ...

  9. Sql Server之旅——第八站 复合索引和include索引到底有多大区别？

    周末终于搬进出租房了,装了宽带....才发现没网的日子...那是一个怎样的与世隔绝呀...再也受不了那样的日子了....好了,既然网 安上去了,还得继续我的这个系列. 索引和锁,这两个主题对我们开发工 ...

  10. ASP.NET MVC 监控诊断、本地化和缓存

    这篇博客主要是针对asp.net mvc项目的一些常用的东东做一个讲解,他们分别是监控诊断.本地化和缓存.虽然前两者跟asp.net mvc看上去好像是没什么关联. 但其实如果真正需要做asp.net ...