通过绝对定位,在页面中随意位置设置两个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. CSS之box-sizing的用处简单介绍

    前几天才发现有 box-sizing 这么个样式属性,研究了一番感觉很有意思, 通过指定容器的盒子模型类型,达到不同的展示效果 例如:当一个容器宽度定义为 width:100%;  之后,如果再增加 ...

  2. magento里的session传值

    1.$registrationCode = Mage::getSingleton('customer/session' )->setData('login_phone_code', $valid ...

  3. fedora22 mysql安装

    fedora19以后好像取消了对mysql的支持,看其他人好像说是用的mariadb的.centos里用yum安装的方式,放到fedora中不能用,所以找了很多资料,尝试了一种可行的办法. 在Fedo ...

  4. MFC 刷新失效的Picture控件

    问题描述:如在摄像头显示时,关闭摄像头,此时Picture控件仍然显示最后一帧图像,需要刷新掉,还原Picture控件.或者重复显示两张不同大小的图片时,第二张背景有第一张图片残留. 解决方法1:(最 ...

  5. ASP.NET Calendar（日历控件）

    定义和用法 Calendar 控件用于在浏览器中显示日历. 该控件可显示某个月的日历,允许用户选择日期,也可以跳到前一个或下一个月. 属性 属性 描述 .NET Caption 日历的标题. 2.0 ...

  6. moodle笔记之-权限api

    <?php//权限定义$capabilities = array( 'mod/mytest:managefiles' => array(//具体的权限:插件类型/插件名/权限 这里是增加一 ...

  7. 【linux-shell】rsync

    https://en.wikipedia.org/wiki/Rsync https://en.wikipedia.org/wiki/Andrew_Tridgell 安德鲁.锤子,发布了rsync的第一 ...

  8. 如何在IIS6,7中部署ASP.NET网站(转载)

    查看web.config文件 web.config通常会放在网站的根目录,这个文件中包含了一最重要的网站运行参数.比如: connectionStrings,httpHandlers,httpModu ...

  9. GO interface显示类型转换方法

    一共两种,直接看代码 import ( "fmt") func main() { //var i interface{} = "TT" var i interf ...

  10. libev实现分析

    libev是一个事件驱动库,底层是基于select.epoll.kqueue等I/O复用接口.所谓事件驱动库,就是用户定义一个事件以及改事件发生时调用的函数,该库会监听该事件,并在事件发生时调用相应的 ...