溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下JavaScript如何限定范圍拖拽及自定義滾動(dòng)條應(yīng)用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
兩個(gè)對(duì)象：div1 和 div2，其中div1是div2的父元素，div2只能在div1的范圍內(nèi)拖拽
圖中，紅點(diǎn)是鼠標(biāo)的位置，兩個(gè)綠色箭頭相減的結(jié)果就是disX，最后oEvent.clientX - disX 就是綠色箭頭的部分，這個(gè)長(zhǎng)度就是判斷是否“出格”的依據(jù)，也就是這個(gè)短的綠色箭頭范圍應(yīng)該在0 ~ div2.offsetWidth - div1.offsetWidth之間！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>客戶區(qū)可見(jiàn)范圍限制拖拽</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;//如果不取消，鼠標(biāo)彈起div依舊會(huì)隨著鼠標(biāo)移動(dòng)
document.onmouseup = null;
};
};
</script>
</body>
</html>基于上述原理，我們來(lái)做一個(gè)自定義滾動(dòng)條，通過(guò)拖拽滾動(dòng)條的位置來(lái)控制另一個(gè)對(duì)象的大小，比如一幅圖。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定義滾動(dòng)條</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>以上是“JavaScript如何限定范圍拖拽及自定義滾動(dòng)條應(yīng)用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼