onmousedown活用之碰撞效果
生活随笔
收集整理的這篇文章主要介紹了
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活用之碰撞效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 携程瘫痪非偶然 国内互联网企业漠视数据管
- 下一篇： laydate点击输入框闪一下不见了_解