兩個對象：div1 和 div2，其中div1是div2的父元素，div2只能在div1的范圍內拖拽
圖中，紅點是鼠標的位置，兩個綠色箭頭相減的結果就是disX，最后oEvent.clientX - disX 就是綠色箭頭的部分，這個長度就是判斷是否“出格”的依據，也就是這個短的綠色箭頭范圍應該在0 ~ div2.offsetWidth - div1.offsetWidth之間！
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>客戶區可見范圍限制拖拽</title> <style type="text/css"> * { padding: 0; margin: 0; } #div1 { width: 500px; height: 500px; background: orange; position: relative; left: 100px; top: 30px; } #div2 { width: 100px; height: 100px; background: black; position: absolute; border: 1px solid blue; } </style></head><body> <div id="div1"> <div id="div2"></div> </div> <script type="text/javascript"> var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, null)[attr]; } } oDiv2.onmousedown = function(ev) { var oEvent = ev || event; // var disX = oEvent.clientX - oDiv2.offsetLeft; // var disY = oEvent.clientY - oDiv2.offsetTop; var disX = oEvent.clientX - parseInt(getStyle(oDiv2, 'left')); var disY = oEvent.clientY - parseInt(getStyle(oDiv2, 'top')); document.onmousemove = function(ev) { var oEvent = ev || event; var l = oEvent.clientX - disX; var t = oEvent.clientY - disY; if (l < 0) { l = 0; } else if (l > oDiv1.offsetWidth - /*parseInt(getStyle(oDiv2,'width'))*/oDiv2.offsetWidth) { l = oDiv1.offsetWidth - oDiv2.offsetWidth; } if (t < 0) { t = 0; } else if (t > oDiv1.offsetHeight - oDiv2.offsetHeight) { t = oDiv1.offsetHeight - oDiv2.offsetHeight; } oDiv2.style.left = l + 'px'; oDiv2.style.top = t + 'px'; }; document.onmouseup = function() { document.onmousemove = null;//如果不取消，鼠標彈起div依舊會隨著鼠標移動 document.onmouseup = null; }; }; </script></body></html>基于上述原理，我們來做一個自定義滾動條，通過拖拽滾動條的位置來控制另一個對象的大小，比如一幅圖。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>自定義滾動條</title> <style type="text/css"> #div1 { width: 600px; height: 20px; background: orange; position: relative; margin: 50px auto; } #div2 { width: 20px; height: 20px; background: green; position: absolute; } #div3 { width: 0; height: 0; margin: 20px auto; } #div3 img { width: 100%; height: 100%; } </style></head><body> <div id="div1"> <div id="div2"></div> </div> <div id="div3"> <img src="https://timgsa.baidu.com/141128%2F201411281041075742.jpg"> </div> <script type="text/javascript"> var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oDiv3 = document.getElementById('div3'); oDiv2.onmousedown = function(ev) { var oEvent = ev || event; var disX = oEvent.clientX - oDiv2.offsetLeft; document.onmousemove = function(ev) { var oEvent = ev || event; var l = oEvent.clientX - disX; if (l < 0) { l = 0; } else if (l > oDiv1.offsetWidth - oDiv2.offsetWidth) { l = oDiv1.offsetWidth - oDiv2.offsetWidth; } oDiv2.style.left = l + 'px';//l范圍：[0,580] //document.title = l / 580; //范圍：[0,1] var ratio = oDiv1.offsetWidth - oDiv2.offsetWidth; var scale = l / ratio; var w = 600 * scale; var h = 370 * scale; console.log(w); oDiv3.style.cssText = ';width:' + w + 'px;height:' + h +'px;'; }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; }; </script></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
