今天要分享的是运用原生JS拖拽进度条改变元素大小，效果如下：
以下是代码实现，欢迎大家复制粘贴。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS拖拽进度条改变元素大小</title>
<style>
#slider {
width: 400px;
height: 20px;
background: #CCC;
position: relative;
margin: 20px auto;
}
#block {
width: 20px;
height: 20px;
background: red;
cursor: pointer;
position: absolute;
}
#box {
width: 0px;
height: 0px;
margin: 0 auto;
background: yellow;
}
</style>
</head>
<body>
<div id="slider">
<div id="block"></div>
</div>
<div id="box"></div>
<script>
window.onload = function () {
var slider = document.getElementById('slider');
var block = document.getElementById('block');
var box = document.getElementById('box');
block.onmousedown = function (ev) {
var myEvent = ev || event;
// 计算鼠标相对滑块上的位置
var disX = myEvent.clientX - block.offsetLeft;
document.onmousemove = function (ev) {
var myEvent = ev || event;
// 计算滑块的动态left值
var left = myEvent.clientX - disX;
// 限制拖拽范围
if (left < 0) {
left = 0;
} else if (left > slider.offsetWidth - block.offsetWidth) {
left = slider.offsetWidth - block.offsetWidth;
}
block.style.left = left + 'px';
// 计算拖拽移动距离与可拖动总范围的比例
var scale = left / (slider.offsetWidth - block.offsetWidth);
// 让box跟随鼠标拖动放大与缩小
box.style.width = scale * 300 + 'px';
box.style.height = scale * 300 + 'px';
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};
};
</script>
</body>
</html>
