通过绝对定位,在页面中随意位置设置两个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. PHP检测文件能否下载

    用php代码检测一个文件是否可以下载,网上没有找到合适的代码,自己实现了一个还挺好用的,分享给有需要的朋友. 基本原理:使用http的HEAD方法,检测报文的头里httpcode是否为200. pub ...

  2. Xsser

    来源:https://www.cqhacker.cn/post-174.html   XSSer使用说明 =============================================== ...

  3. c#语言简介

    语言的历史:c,c++,java,c#, c语言最早,c++语言复杂,而java把其中难的一部分去掉,也成为c--,而c#早期类似java. c#简单高效,并且与web结合. C#的运行环境是.net ...

  4. C# 语言规范_版本5.0 (第10章 类)

    1. 类 类是一种数据结构,它可以包含数据成员(常量和字段).函数成员(方法.属性.事件.索引器.运算符.实例构造函数.静态构造函数和析构函数)以及嵌套类型.类类型支持继承,继承是一种机制,它使派生类 ...

  5. Python基础知识学习_Day1

    1,python介绍 诞生于1989年圣诞节,目前越来越受到业界认可.应用领域十分广泛 云计算: 云计算最火的语言, 典型应用OpenStack WEB开发: 众多优秀的WEB框架,众多大型网站均为P ...

  6. MFC 自定义控件

    需要在MFC实现自定义控件功能,网上搜集找的如下方法实现: 以下是步骤说明. 一.自定义一个空白控件  1.先创建一个MFC工程 NEW Project-->MFC-->MFC Appli ...

  7. [APP]如果你想反编译

    反编译,主要用到两类工具,一个就是获取apk包的包名(appPackage)和类名(appActivity)的工具,其实就是反编译出java源代码,dex2jar和jd-gui:一个是将一个apk包反 ...

  8. Dylans loves numbers

    Problem Description Who is Dylans?You can find his ID in UOJ and Codeforces. His another ID is s1451 ...

  9. java中equals方法和contentEquals方法区别

    java中,String类里提供了两种字符串的比较方式(算上“==”应该是三种) String line1 = new String("0123456789"); String l ...

  10. matlab读xls数据

    [ndata,label,abalone]=xlsread('data.xls') ndata:表示数字属性 label:表示类别属性 abalone:全部数据