通过绝对定位,在页面中随意位置设置两个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. 世界之窗(TheWorld)浏览器 3.6.1.0 简体中文绿色版

    软件名称: 世界之窗(TheWorld)浏览器 3.6.1.0 简体中文绿色版软件语言: 简体中文授权方式: 免费软件运行环境: Win7 / Vista / Win2003 / WinXP 软件大小 ...

  2. nginx 搭建 文件下载服务

    location / { root /home/data-nginx/; index index.html index.htm; autoindex on; ##显示索引 autoindex_exac ...

  3. H264帧内预测模式编号的编码过程

    1 本文词汇约定 宏块:H264编码基本单元,16x16像素(或采样)构成 块:   由8x8像素(或采样)构成的单位 子块:   由4x4像素(或采样)构成的单位 2 帧内亮度预测模式 H264规范 ...

  4. xshell 注册码

    Xshell 5 注册码: 101210-450789-147200Xftp 5 注册码:101210-450789-147200 Xmanager 5 注册码:101210-450789-14720 ...

  5. react学习笔记-05 lifecycle

    根据React官网,react有三个生命状态:装载(Mounting),更新(updating),卸载() 一:装载 装载:componentWillMount/componentDidMount(组 ...

  6. ACdream 1732

    input 样例个数T           <=10000 每个样例一个n(2<=n<=10^8) output lcm(1,2,...,n)%2^32 Sample Input 5 ...

  7. 非常不错的MySQL优化的8条经验

    1.选取最适用的字段属性   MySQL 可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度 ...

  8. C1FlexGrid小结（转自http://www.cnblogs.com/C1SupportTeam/archive/2012/12/11/2812316.html）

    C1FlexGrid控件来对一个表格格式中的数据进行显示,编辑,组和总结.该表格可以绑定到一个数据源,它可以对自己的数据进行管理. C1FlexGrid控件有一个包含以下元素的丰富的对象模型: 以下的 ...

  9. hadoop 2.2.0 关于map和reduce的个数的设置

    关于hadoop中的map过程,我的理解是每一个map系统会开启一个JVM进程来处理,map之间相互并行,map函数内串行.这样的想法是否正确? 由于想在hadoop集群上算一个初始输入数据不多,但是 ...

  10. 淘淘商城_day07_课堂笔记

    今日大纲 讲解订单系统 基于订单系统完成下单功能的开发 使用Solr完成商品的搜索功能 订单系统 说明:订单系统只是做讲解,不做开发. 导入taotao-order 表结构 订单表: 订单商品表: 疑 ...