jQuery可拖动进度条代码

浏览：285次- 评论：0次- 发布时间：2020-03-06

Html

Css

0%

$(function() {
    $(window).unbind("mousemove");
    window.RadioLeft = $(".radio").offset().left;
    window.BoxLeft = $(".bar").offset().left;
    window.BoxWidth = $(".bar").width();
    window.RadioWidth = $(".radio").width();

$(".radio").mousedown(function(e) {
        var X = e.pageX;
        $(window).bind("mousemove");
        $(window).mousemove(function(e) {
            if (e.pageX < BoxLeft) {
                $(".radio").css("left", "0px");
                $(".title").text("0%");

} else if (e.pageX > (BoxLeft + BoxWidth - RadioWidth)) {
                $(".radio").css("right", "0px");
                $(".title").text("100%");
            } else {
                $(".radio").css("left", e.pageX - RadioLeft + "px");
                var newRadioLeft = $(".radio").offset().left;
                var newBoxLeft = $(".bar").offset().left;
                var val = ((newRadioLeft - newBoxLeft) / BoxWidth) * 100;
                val = Math.floor(val);
                if (val > 100) {
                    val = 100;
                }
                $(".title").text(val + "%");
                $(".loading").width(val + "%");
            }
        });
    });
    $(".radio").mouseup(function(e) {
        $(window).unbind("mousemove");
    });
    $(window).mouseup(function(e) {
        $(this).unbind("mousemove");
    });

});

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：可以使用鼠标拖动显示百分比

简单使用，只需要拖动鼠标即可；整体使用了loadeBox的DIV包裹，可以随意定位，随意调整大小。

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取