可拖动进度条的实现
-
大家好,今天工作不忙 分享一个简单的进度条案例.希望有需要的小伙伴可以看到.思路不一定是最好的.但绝对适合初学者
首先 进度条的功能,你需要知道 进度条拖动前后 一共触发了3个事件
即:
1.鼠标按下事件
2.鼠标拖动事件
3.鼠标抬起事件
其次 他的拖动原理是 通过计算当前拖动的坐标位置 减去进度条盒子到视口的距离.
最后把进度条按钮 进行相应距离的偏移
即 偏移的距离=鼠标当前的坐标-盒子到窗口边缘的距离;
然后 元素本身.css( ‘左或右’, 偏移的距离+‘px’ );
代码如下:
html:
<div class="progress-box">
<div class="progress-bar"></div>
<div class="progress-btn"></div>
<span class="progress-num">0</span>
</div>
<!-- box外部盒子 bar进度条 btn拖动按钮 num给外部一个显示拖动的数字
-->
CSS样式
.progress-box {
width: 200px;
position: relative;
height: 30px;
padding: 5px;
background-color: #ccc;
}
.progress-bar {
width: 94%; /*宽度不是100%因为考虑到按钮本身也占据了15px的宽度 你设置100 按钮就会溢出;*/
height: 10px;
position: absolute;
background-color: pink;
border-radius: 10px;
top: 5px;
}
.progress-btn {
width: 15px;
height: 15px;
position: absolute;
background-color: #fff;
border-radius: 5px;
top: 2.5px;
left: 0;
}
.progress-btn:hover {
background-color: orange;
cursor: pointer;
}
.progress-num {
/* text-align: center; */
position: absolute;
bottom: 0;
left: 50%;
font-size: 12px;
transform: translateX(-50%);
}
逻辑:本文使用到了JQ 逻辑也相对简单
$(function(){
let $progressBox = $(".progress-box");
$progressBox.find(".progress-btn").on("mousedown", function (e) {
// 防止冒泡 阻止默认行为
var e = window.event || e;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBabble = true;
};
// alert(123)
console.log(e.pageX);
//dix是盒子到窗口的位置
var $diX = e.pageX - this.offsetLeft;
var _self = this;
$(document).on("mousemove.ghtx", function (e) {
// 计算当前 拖动的距离(点击位置的距离减去盒子到窗口的距离 ) 如果小于0就等0 大于185就等185
var $left = e.pageX - $diX;
var $x = $left < 0 ? 0 : $left > 185 ? 185 : $left;
// 拖动时 有数字反馈 把拖动的距离除以2 +%符号
// 这里应该使用兄弟选择器,这样即使复用,也不含干扰其他相同元素
$(_self).next().text(parseInt($x / 1.85) + '%');
// 然后再让 按钮进行相应的偏移 因为是绝对定位 直接便宜即可
$(_self).css('left', $x + 'px');
});
// 最后当鼠标抬起时 关闭以上俩个事件
$(document).on("mouseup.ghtx",function(){
$(document).off("mousemove.ghtx mouseup.ghtx" )
})
})
})
以上就是案例的全部啦.感谢观看