onmousedown活用之碰撞效果

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

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

 1 <!DOCTYPE html>
 2 <html>
 3
 4 <head>
 5     <meta charset="UTF-8">
 6     <title></title>
 7     <style type="text/css">
 8         #div { 9             width: 100px;
10             height: 100px;
11             background: pink;
12             position: absolute;
13             top: 50px;
14             left: 60px;
15             cursor: pointer;
16         }
17
18         #div1 {19             width: 100px;
20             height: 100px;
21             border: 1px solid black;
22             position: absolute;
23             top: 300px;
24             left: 100px;
25         }
26
27         #div2 {28             width: 100px;
29             height: 100px;
30             border: 1px solid blue;
31             position: absolute;
32             top: 200px;
33             left: 600px;
34         }
35     </style>
36 </head>
37
38 <body>
39     <div id="div"></div>
40     <div id="div1"></div>
41     <div id="div2"></div>
42
43 </body>
44
45 </html>

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

 1 <script type="text/javascript">
 2         var Div = document.getElementById("div");
 3         var Div1 = document.getElementById("div1");
 4         var Div2 = document.getElementById("div2");
 5
 6         //第一个固定框的上下左右的值
 7         var top1 = parseInt(getStyle(div1, "top"));
 8         var bottom1 = parseInt(getStyle(div1, "top")) + 100;
 9         var left1 = parseInt(getStyle(div1, "left"));
10         var right1 = parseInt(getStyle(div1, "left")) + 100;
11
12         //第二个固定框的上下左右的值
13         var top2 = parseInt(getStyle(div2, "top"));
14         var bottom2 = parseInt(getStyle(div2, "top")) + 100;
15         var left2 = parseInt(getStyle(div2, "left"));
16         var right2 = parseInt(getStyle(div2, "left")) + 100;
17         //alert(top1);
18         var red1 = "blue";
19         var red2 = "red";
20
21         Div.onmousedown = function(ev) {
22             var o = event || ev;
23             //获取到鼠标点击的位置距离div左侧和顶部边框的距离
24             oX = o.clientX - parseInt(getStyle(Div, "left"));
25             oY = o.clientY - parseInt(getStyle(Div, "top"));
26             //当鼠标移动，把鼠标的偏移量给div
27             document.onmousemove = function(ev) {
28                 var o = event || ev;
29                 //计算出鼠标在XY方向上移动的偏移量，把这个偏移量加给DIV的左边距和上边距，div就会跟着移动
30                 Div.style.left = o.clientX - oX + "px";
31                 Div.style.top = o.clientY - oY + "px";
32
33                 var left = parseInt(getStyle(div, "left"));
34                 var right = parseInt(getStyle(div, "left")) + 100;
35                 var top = parseInt(getStyle(div, "top"));
36                 var bottom = parseInt(getStyle(div, "top")) + 100;
37
38
39                 //第鼠标框的bottom值小于第二个框的top1值
40                 //第鼠标框的left值大于第二个框的right1值
41                 //第鼠标框的top值大于第二个框的bottom1值
42                 //第鼠标框的right值小于第二个框的left1值
43                 //当这些都满足的时候，说明第鼠标框没有触碰第二个框，所以背景色不变
44                 //否则，就是触动框了，背景色变
45                 if (bottom < top1 || left > right1 || top > bottom1 || right < left1) {
46                     Div1.style.background = "";
47                 } else {
48                     Div1.style.background = red1;
49                 }
50
51                 if (bottom < top2 || left > right2 || top > bottom2 || right < left2) {
52                     Div2.style.background = "";
53                 } else {
54                     Div2.style.background = red2;
55                 }
56
57             }
58
59
60             //当鼠标按键抬起，清除移动事件
61             document.onmouseup = function() {
62                 document.onmousedown = null;
63                 document.onmousemove = null;
64             }
65
66         }
67
68         //获取属性的数值
69         function getStyle(obj, attr) {
70             if (obj.currentStyle) {
71                 //currentStyle获取样式的值，对应的是ie浏览器
72                 return obj.currentStyle[attr];
73             } else {
74                 //同理，对应的是其他浏览器
75                 return getComputedStyle(obj, false)[attr];
76             }
77         }
78     </script>

转载于:https://www.cnblogs.com/WhiteM/p/6089055.html

onmousedown活用之碰撞效果相关推荐

添加墙元素实现碰撞效果
碰撞效果实现: 利用CollisionUtils判断两个对象是否发生碰撞 x1:第一个矩形的x坐标 y1:第一个矩形的y坐标 w1:第一个矩形的宽度 h1:第一个矩形的高度 x2:第二个矩形的x坐标 ...
【干货篇】Processing-Kinect人形物理碰撞效果
从二月到五月的毕设答辩,期间发生了很多没有结果的事情,但做毕设这件事情是从一而终的贯彻到底哒,前期遇到了许多技术上的问题,幸运的是在网络中遇到了乐于助人的人们,大家的无私分享才使得我能顺利毕业,这个过 ...
canvas小球连线碰撞效果 html+css+js
先看效果(完整代码在底部): canvas小球连线碰撞完整源代码 html+css+js 这是我的B站地址~热烈欢迎实现(看注释,可一步一步跟着实现): 0:定义标签: <h1>北极光之 ...
用vite命令搭个react移动端项目，实现canvas碰撞效果（按需导入antd-mobile，pxtorem适配）
前言最近看见大家都在卷react源码,突然就心慌了.但是自己的操作水平还有待提高,现在看源码也需要循序渐进的,打算还是从写代码慢慢理解功能再去看源码.所以就尝试使用vite这个构建工具进行尝试构建一 ...
Android 打飞机小游戏的实现 - 画面移动对象封装碰撞效果
打飞机小游戏 *1.画背景 *2.画飞机 *3.画小怪 *4.画子弹 *--背景,飞机.小怪.子弹各有draw和move方法 public class MainActivity extends ...
Unity3D屏幕划线附带物理碰撞效果
Unity用LineRenderer实现的,让球体缘着划的线运动的重力效果.类似拯救火柴人的简单效果 Unity屏幕划线带重力刚体效果-Unity3D文档类资源-CSDN下载
8 Babylonjs基础入门相机，模型碰撞和重力效果
你玩过第一人称的射击游戏吗?大作CF,CS类型的.本教程,我们将模拟相同的相机运动:摄像机在地面,将和地面产生碰撞效果,并可以与场景中的任何其他模型也会发生碰撞. 如何实现碰撞为了实现这种效果,我们 ...
01 C语言实现动态气泡碰撞和移动的效果，小球碰撞，Win7气泡壁纸，碰撞算法
C语言实现动态气泡碰撞和移动的效果作者将狼才鲸创建日期 2023-01-29 Git源码仓库地址:C语言实现动态气泡碰撞和移动的效果 CSDN文章地址:01 C语言实现动态气泡碰撞和移动的效果 ...
unity控制2D物体移动，2D碰撞器Box Collider却没有效果
首先,给主角添加2D刚体和2D碰撞器,为了让主角不受重力的影响,设置2D刚体的Body Type属性为Kinematic运动学,还有给需要碰撞的物体添加上2D碰撞器. 准备工作做好以后,控制主角移动却 ...

onmousedown活用之碰撞效果

onmousedown活用之碰撞效果相关推荐

最新文章

热门文章