通过绝对定位,在页面中随意位置设置两个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. select与ajax结合

    要实现的功能是,点击select输入框,数据库里面的数据会以option弹出. 这需要用到ajax异步连接数据库 下面贴出代码 先说明一下后台传递的数据是json,以map的形式传入的.后台代码很简单 ...

  2. [Poi2015]

    [POI2015]Łasuchy 一看以为是sb题 简单来说就是每个人获得热量要尽量多 不能找别人 首先这道题好像我自己找不到NIE的情况 很容易想到一个优化 如果一个数/2>另一个数 那么一定 ...

  3. Ubuntu 14.04 配置FTP

    配置Ubuntu 14.04的FTP服务,通过Windows远程访问Ubuntu 14.04的同时,可以实现windows和Ubuntu之间的文件交换传输.在多用户环境下,每一个用户都可以通过自己的帐 ...

  4. c#简单易用的短信发送服务 悠逸企业短信服务

     悠逸企业短信发送服务,是一种比较简单易操作的短信发送服务,使用POST的方式,请求相应地址就可以实现短信发送功能 1 /// <summary> /// 短信发送服务 /// </ ...

  5. ecshop 后台添加新的设置

    1.ecs_shop_config 表添加新的值. 2.language/zh_cn/admin/shop_config.php 设置字段后台字段名和提示信息($_LANG['cfg_name'][' ...

  6. mx51 IPU 透明处理

    Freescale MX51平台的透明处理根据bpp(bits_per_pixel)不同,处理方式有所不同. 透明处理涉及到两个图层的合并,这个合并操作是MX51 IPU的DP(Display pro ...

  7. JS：JSP Servlet

    Servlet 是在服务器上运行的小程序.这个词是在 Java applet的环境中创造的,Java applet 是一种当作单独文件跟网页一起发送的小程序,它通常用于在客户端运行,结果得到为用户进行 ...

  8. Saltstack 常用的模块及API

    Saltstack提供了非常丰富的功能模块,设计操作系统的基础功能,常用工具支持等, 官网模块介绍 http://docs.saltstack.com/ref/modules/all/index.ht ...

  9. 用border做一个移动端常见的返回按钮

    第一步 .hs1{ float: left; .mt(.25rem); .ml(.12rem); width: .3rem; height: .3rem; border-top: 2px solid ...

  10. jquery学习笔记2——jq效果

    一.显示隐藏: 可以使用show()和hide()方法来显示隐藏: $("#hide").click(function(){ $("p").hide(); }) ...