HTML5 可拖动进度条

时间:2021-11-12 来源:未知网络 作者:996建站网

今天心情还可以..没有前两天那么沮丧了..

写了个小玩意..估计以后能用的上.

exports.progressDragable = function (progressNode,callback) {
//progress标签初始化为0
progressNode.value = 0;
//progress标签能够用鼠标拖动.
//callback的参数中会传入progressNode

if(progressNode.tagName != 'PROGRESS'){
console.log('arg 1:node is not a progress node.');
return;
}
if (typeof callback != 'function'){
console.log('arg 2:callback is not a function');
return;
}

var rect = progressNode.getBoundingClientRect();
function changeValue(event) {
event.stopPropagation();
var length = event.pageX rect.left
one.value = length/rect.width;
//回调函数,并传入进度条的值
callback(progressNode.value);

}

//点击改变进度
progressNode.addEventListener('click',changeValue,false);

//拖动改变进度
progressNode.addEventListener('mousedown',function (event) {
event.stopPropagation();
if(event.button == 0){
one.addEventListener('mousemove',changeValue,false);
}
},false);
progressNode.addEventListener('mouseup',function (event) {
event.stopPropagation();
if(event.button == 0){
one.removeEventListener('mousemove',changeValue,false);
}
},false);

//当鼠标移元素时,移除移动改变进度的监听器,防止鼠标在元素外弹起的情况.
progressNode.addEventListener('mouseleave',function (event) {
event.stopPropagation();
one.removeEventListener('mousemove',changeValue,false);
},false);
};

HTML5 可拖动进度条插图

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序