通过绝对定位,在页面中随意位置设置两个div;

也就是说div 是拖动的框,div1和div2是被触碰的框;

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

         #div {

             width: 100px;

             height: 100px;

             background: pink;

             position: absolute;

             top: 50px;

             left: 60px;

             cursor: pointer;

         }

         #div1 {

             width: 100px;

             height: 100px;

             border: 1px solid black;

             position: absolute;

             top: 300px;

             left: 100px;

         }

         #div2 {

             width: 100px;

             height: 100px;

             border: 1px solid blue;

             position: absolute;

             top: 200px;

             left: 600px;

         }

     </style>

 </head>

 <body>

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

     <div id="div1"></div>

     <div id="div2"></div>

 </body>

 </html>

所有的script是在写在body里面的，

 <script type="text/javascript">

         var Div = document.getElementById("div");

         var Div1 = document.getElementById("div1");

         var Div2 = document.getElementById("div2");

         //第一个固定框的上下左右的值

         var top1 = parseInt(getStyle(div1, "top"));

         var bottom1 = parseInt(getStyle(div1, "top")) + 100;

         var left1 = parseInt(getStyle(div1, "left"));

         var right1 = parseInt(getStyle(div1, "left")) + 100;

         //第二个固定框的上下左右的值

         var top2 = parseInt(getStyle(div2, "top"));

         var bottom2 = parseInt(getStyle(div2, "top")) + 100;

         var left2 = parseInt(getStyle(div2, "left"));

         var right2 = parseInt(getStyle(div2, "left")) + 100;

         //alert(top1);

         var red1 = "blue";

         var red2 = "red";

         Div.onmousedown = function(ev) {

             var o = event || ev;

             //获取到鼠标点击的位置距离div左侧和顶部边框的距离

             oX = o.clientX - parseInt(getStyle(Div, "left"));

             oY = o.clientY - parseInt(getStyle(Div, "top"));

             //当鼠标移动，把鼠标的偏移量给div

             document.onmousemove = function(ev) {

                 var o = event || ev;

                 //计算出鼠标在XY方向上移动的偏移量，把这个偏移量加给DIV的左边距和上边距，div就会跟着移动

                 Div.style.left = o.clientX - oX + "px";

                 Div.style.top = o.clientY - oY + "px";

                 var left = parseInt(getStyle(div, "left"));

                 var right = parseInt(getStyle(div, "left")) + 100;

                 var top = parseInt(getStyle(div, "top"));

                 var bottom = parseInt(getStyle(div, "top")) + 100;

                 //第鼠标框的bottom值小于第二个框的top1值

                 //第鼠标框的left值大于第二个框的right1值

                 //第鼠标框的top值大于第二个框的bottom1值

                 //第鼠标框的right值小于第二个框的left1值

                 //当这些都满足的时候，说明第鼠标框没有触碰第二个框，所以背景色不变

                 //否则，就是触动框了，背景色变

                 if (bottom < top1 || left > right1 || top > bottom1 || right < left1) {

                     Div1.style.background = "";

                 } else {

                     Div1.style.background = red1;

                 }

                 if (bottom < top2 || left > right2 || top > bottom2 || right < left2) {

                     Div2.style.background = "";

                 } else {

                     Div2.style.background = red2;

                 }

             }

             //当鼠标按键抬起，清除移动事件

             document.onmouseup = function() {

                 document.onmousedown = null;

                 document.onmousemove = null;

             }

         }

         //获取属性的数值

         function getStyle(obj, attr) {

             if (obj.currentStyle) {

                 //currentStyle获取样式的值，对应的是ie浏览器

                 return obj.currentStyle[attr];

             } else {

                 //同理，对应的是其他浏览器

                 return getComputedStyle(obj, false)[attr];

             }

         }

     </script>

onmousedown活用之碰撞效果的更多相关文章

  1. iOS 力学动画生成器UIKit Dynamics 之碰撞效果解说

    UIKit Dynamic是iOS7 新增的一组类和方法.可赋予UIView逼真的行为和特征,不须要写动画效果那些繁琐的代码,让开发者可以轻松地改善应用的用户体验.一共同拥有6个可用于定制UIDyna ...

  2. 用Easing函数实现碰撞效果

    用Easing函数实现碰撞效果 工程中需要的源码请从这里下载: https://github.com/YouXianMing/EasingAnimation 源码: // // ViewControl ...

  3. iOS 力学动画生成器UIKit Dynamics 之碰撞效果讲解

    UIKit Dynamic是iOS7 新增的一组类和方法,可赋予UIView逼真的行为和特征,不需要写动画效果那些繁琐的代码,让开发人员能够轻松地改善应用的用户体验.一共有6个可用于定制UIDynam ...

  4. 拖拽碰撞效果，高级浏览器下全部搞定（ie6-8还没有搞定）

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  5. UIDynamic仿物理引擎-浮动碰撞效果-b

    最近产品提了个需求(电商的APP-两鲜),需要在APP背景加上几个水果图案在那里无规则缓慢游荡...模仿 天天果园 APP的.好吧,那我就在网上找了很多文章,总结一下写个demo.效果如下: Mou ...

  6. U3D 实现地面碰撞效果

    前面讲了如何让两个刚体碰撞: 现在来细细讲解一下, 首先,精灵刚体后就好比物理世界的物体,是受到重力所用的, 然后两个物体要添加碰撞系数才能实现碰撞, 这种情况下,碰撞后会使得另一个刚体也会随之运动, ...

  7. onmousedown活用之鼠标拖动

    这个布局蛮简单的就是一个div块,通过定位,固定位置 <html> <head> <meta charset="UTF-8"> <titl ...

  8. Unity之CharacterController 碰撞问题总结

    CharacterController 不会受到scene的重力影响,自带物理碰撞检测,在脱离导航网格的应用场景下(比如飞行),是很有优势的Unity原生工具组件.如果在复杂的应用场景里,会有多种CC ...

  9. [Unity3D]自己动手重制坦克舰队ArmadaTank(2)从碰撞说起

    [Unity3D]自己动手重制坦克舰队ArmadaTank(2)从碰撞说起 在上一篇里我给出了重制的坦克舰队效果图和试玩程序.本篇介绍一下玩家坦克和敌方坦克碰撞问题. +BIT祝威+悄悄在此留下版了个 ...

随机推荐

  1. svn自动备份并上传到ftp

    .建立bat文件 simpleBackup.bat,文件内容如下 @echo 正在备份版本库%1......@%SVN_HOME%bin\svnadmin hotcopy %1 %BACKUP_DIR ...

  2. ios开发之简单实现loading动画效果

    最近有朋友问我类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的,是不是就是一个gif图片呢!我的回答当然是否定了,当然不排除也有人用gif图片啊!下面我就来罗列三种实现loadi ...

  3. C＃中的委托到底是什么概念？？

    委托,简单理解是这样的.比如您要管您的孩子,把孩子送进了幼儿园.OK.此时您就把您的孩子委托给了幼儿园.当幼儿园放学,将孩子交还给您的手中.则是委托的回调.当然我这里的例子是说异步委托调用.您也可以同 ...

  4. Facebook 在page添加自己开发的app

    最初接到的需求是,在facebook主页中嵌入一个类似这样领取游戏礼包的页面. 一开始连facebook开发者中心在哪里都不知道,在万能的搜索框里面找到static html之类的第三方应用,但是这样 ...

  5. GNU Octave fact函数输出

    无意间发现了这么一个函数,可以随机输出关于RMS的笑话.挺有意思的. `fact' is a function from the file /usr/share/octave/3.6.2/m/misc ...

  6. Introduction to Programming Contests (stanford)

    http://web.stanford.edu/class/cs9http://web.stanford.edu/class/cs97si/7si/

  7. iOS 10 / Swift 3.0 / XCode 8 总结

    1,iOS10 新增的privacy settings iOS10添加了新的权限控制范围 如果你尝试访问这些隐私数据时得到如下错误: > This app has crashed because ...

  8. cuckoo相关

    Q1:pefile is out of date 现象:ERROR: Your version of pefile is out of date.  Please update to the late ...

  9. pdf 电子书分享

    http://yunpan.cn/cLgXntGmIas7A 访问密码 7d04 来自为知笔记(Wiz)

  10. oracle索引

    1,建立索引 create index goods_num on goods (num) tablespace data; 2,查看表上索引 select * from USER_INDEXES wh ...