Html:
0%
Css:
.progress{
position: relative;
width:300px;
margin:100px auto;
}
.progress_bg{
height: 10px;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
background-color:#c5c2c2;
}
.progress_bar{
background: #43a5f5;
width: 0;
height: 10px;
border-radius: 5px;
}
.progress_btn{
width: 20px;
height: 20px;
border-radius: 5px;
position: absolute;
background:#fff;
left: 0px;
margin-left: -10px;
top:-5px;
cursor: pointer;
border:1px #ddd solid;
box-sizing:border-box;
}
.progress_btn:hover{
border-color:#24e9f7;
}
Javascript:
$(function(){
let flag = false;
let x = 0;
let left = 0;
let bg_left = 0;
$('.progress_btn').mousedown(function(e){
x = e.pageX-left;
flag = true;
});
$(document).mouseup(function(){
flag = false;
});
//鼠标移动事件
//鼠标移动的同时去改变精度条的长度和按钮的相对左部的距离
$('.progress').mousemove(function(e){
if(flag){
//距离的计算,pageX属性,求出鼠标移动的距离
left = e.pageX - x;
if(left <=0){
left = 0;
}
else if(left > 300){
left = 300;
}
$('.progress_btn').css('left',left);
$('.progress_bar').width(left);
$('.progress_text').html(parseInt((left/300)*100) + '%');
}
});
//鼠标点击事件
//鼠标点击就记录相对位置
$('.progress_bg').click(function(e){
if(!flag){
bg_left = $('.progress_bg').offset().left;
left = e.pageX - bg_left;
if(left<=0){
left = 0;
}
else if(left > 300){
left = 300;
}
$('.progress_btn').css('left',left);
$('.progress_bar').animate({width:left},300);
$('.progress_text').html(parseInt((left/300)*100) + '%');
}
});
});
留言与评论(共有 0 条评论) “” |