天天看点

Jquery实现可拖动进度条

效果图:

Jquery实现可拖动进度条

1.html中添加:

<div class="progress">
    <div class="progress_bg">
        <div class="progress_bar"></div>
    </div>
    <div class="progress_btn"></div>
    <div class="text">0%</div>
</div>
           

2.添加css样式:

<style>
    .progress{position: relative; width:300px;margin:100px auto;}
    .progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;}
    .progress_bar{background: #5FB878; 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:#F7B824;}
</style>
           

3.添加js事件:

<script>
$(function(){
    var tag = false,ox = 0,left = 0,bgleft = 0;
    $('.progress_btn').mousedown(function(e) {
        ox = e.pageX - left;
        tag = true;
    });
    $(document).mouseup(function() {
        tag = false;
    });
    $('.progress').mousemove(function(e) {//鼠标移动
        if (tag) {
            left = e.pageX - ox;
            if (left <= 0) {
                left = 0;
            }else if (left > 300) {
                left = 300;
            }
            $('.progress_btn').css('left', left);
            $('.progress_bar').width(left);
            $('.text').html(parseInt((left/300)*100) + '%');
        }
    });
    $('.progress_bg').click(function(e) {//鼠标点击
        if (!tag) {
            bgleft = $('.progress_bg').offset().left;
            left = e.pageX - bgleft;
            if (left <= 0) {
                left = 0;
            }else if (left > 300) {
                left = 300;
            }
            $('.progress_btn').css('left', left);
            $('.progress_bar').animate({width:left},300);
            $('.text').html(parseInt((left/300)*100) + '%');
        }
    });
});
</script>
           

4.完整代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery实现可拖动进度条</title>
<style>
    .progress{position: relative; width:300px;margin:100px auto;}
    .progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;}
    .progress_bar{background: #5FB878; 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:#F7B824;}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="progress">
    <div class="progress_bg">
        <div class="progress_bar"></div>
    </div>
    <div class="progress_btn"></div>
    <div class="text">0%</div>
</div>
<script>
$(function(){
    var tag = false,ox = 0,left = 0,bgleft = 0;
    $('.progress_btn').mousedown(function(e) {
        ox = e.pageX - left;
        tag = true;
    });
    $(document).mouseup(function() {
        tag = false;
    });
    $('.progress').mousemove(function(e) {//鼠标移动
        if (tag) {
            left = e.pageX - ox;
            if (left <= 0) {
                left = 0;
            }else if (left > 300) {
                left = 300;
            }
            $('.progress_btn').css('left', left);
            $('.progress_bar').width(left);
            $('.text').html(parseInt((left/300)*100) + '%');
        }
    });
    $('.progress_bg').click(function(e) {//鼠标点击
        if (!tag) {
            bgleft = $('.progress_bg').offset().left;
            left = e.pageX - bgleft;
            if (left <= 0) {
                left = 0;
            }else if (left > 300) {
                left = 300;
            }
            $('.progress_btn').css('left', left);
            $('.progress_bar').animate({width:left},300);
            $('.text').html(parseInt((left/300)*100) + '%');
        }
    });
});
</script>
</body>
</html>