实现简单的进度条效果

淡淡的烟草味﹌ 2023-07-18 04:59 37阅读 0赞

封装一个简单的jquery插件，实现简单的可滑动进度条。可能一些情况没有考虑到，仅供参考。

另外我还写了一篇原生实现滑动进度条的文章，仅仅需要修改样式即可。文章链接如下：[https://blog.csdn.net/qq\_35134066/article/details/105197271][https_blog.csdn.net_qq_35134066_article_details_105197271]

(function ($) {
        $.fn.sliderProgress = function (options, actions) {
            var defaults = {
                width: 200, // 这是宽度
                height: 10, // 这是高度 写的时候虽然考虑到百分比但数值更可靠一点
                barColor: "#ffffff",  // 整个进度条的背景色
                valColor: "#eaeaea",  // 已滑动区域的背景色
                max: 100,  // 可以设置的最大值当做100%，比如200是100%或者300是100%
                value: 0,  // 当前初始值
                border: true, // 进度条边框
                borderWidth: 1, // 进度条边框宽度
                borderColor: "#efefef",  // 边框颜色
                dotRadius: 10,  // 进度条滑块圆点的半径
                dotColor: "#ffffff" // 滑块颜色
            };
            var that = this;
            this.settings = null;
            if (typeof options === "string") {
                // 这里提供了getValue和setValue两个方法
                var tmp = options;
                options = actions;
                actions = tmp;
                if (actions == "setValue") {
                    if (typeof options === "number") {
                        that.find(".bar").css({
                            width: options / settings.max * 100 + "%"
                        })
                        that.find(".dot").css({
                            left: "calc(" + options / settings.max * 100 + "%" + " - " + (settings.dotRadius + "px") + ")"
                        })
                    } else {
                        throw Error("方法调用错误！")
                    }
                }
                if (actions == "getValue") {
                    // getValue有两种返回值，第一个是数值，第二个是返回百分比的值
                    // return Math.round(settings.max * (that.find(".bar").width() / that.width()));
                    return Math.round(that.find(".bar").width() / that.width() * 100);
                }
            } else {
                // 初始化
                settings = $.extend(true, defaults, options);
                if (typeof settings.max !== "number" || typeof settings.value !== "number" || typeof settings.borderWidth !== "number" || typeof settings.border !== "boolean") {
                    throw Error("参数字段有误！");
                }
                init(settings);
            }
    
            function dealNumber(num) {
                var reg1 = /^(\w)+$/; // 判断是数字
                var reg2 = /^(\w)+%$/; // 判断是百分比
                if (reg1.test(num)) {
                    return num + "px";
                } else if (reg2.test(num)) {
                    return num;
                } else {
                    return "200px"
                }
            }
    
            function init(settings) {
                flag = true;
                // 初始化样式
                that.css({
                    position: "relative",
                    width: dealNumber(settings.width),
                    height: dealNumber(settings.height),
                    backgroundColor: settings.barColor,
                    borderRadius: "5px",
                    border: settings.border ? settings.borderWidth + "px " + settings.borderColor + " solid" : "none",
                    margin: "10px 0"
                })
                // 初始化值样式
                var bar = $("<div class='bar'></div>").css({
                    width: (settings.value / settings.max) * 100 + "%",
                    height: "100%",
                    backgroundColor: settings.valColor,
                    borderRadius: "5px"
                });
                that.append(bar);
                // 初始化点样式
                var dot = $("<div class='dot'></div>").css({
                    position: "absolute",
                    left: "calc(" + (settings.value / settings.max) * 100 + "%" + " - " + (settings.dotRadius + "px") + ")",
                    top: settings.height > settings.dotRadius * 2 ? (settings.height - settings.dotRadius * 2) / 2 + (settings.border ? settings.borderWidth : 0) + "px" : "-" + ((settings.dotRadius * 2 - settings.height) / 2 + (settings.border ? settings.borderWidth : 0)) + "px",
                    width: settings.dotRadius * 2 + "px",
                    height: settings.dotRadius * 2 + "px",
                    borderRadius: "50%",
                    border: "1px solid #aaa",
                    backgroundColor: settings.dotColor,
                    cursor: "pointer"
                });
                that.append(dot);
                var min = that.offset().left;
                var max = min + settings.width;
                var startX;
                var endX;
                var flag = false;
                // 监听鼠标事件
                that.on("mousedown", ".dot", function (e) {
                    // screenX,screenY显示相对于用户显示器屏幕的X,Y坐标。
                    // clientX,clientY显示相对于浏览器可视区域的X,Y坐标。可视区域不包含工具栏和滚动条
                    // pageX,pageY显示相对于文档的坐标，包含滚动条。
                    flag = true;
                    startX = e.pageX;
                });
                $(document).on("mousemove", function (e) {
                    if (!flag) {
                        return;
                    }
                    endX = e.pageX;
                    var left = 0;
                    if (endX <= min) {
                        left = 0;
                    } else if (endX <= startX) {
                        left = (endX - min) / settings.width * 100;;
                    } else if (endX > startX && endX <= max) {
                        left = (endX - min) / settings.width * 100;
                    } else {
                        left = 100;
                    }
                    that.sliderProgress("setValue", left);
                });
                $(document).on("mouseup", function (e) {
                    flag = false;
                })
                // 移动端触摸事件没有写。。。
            }
            return this;
        }
    })(jQuery);

[https_blog.csdn.net_qq_35134066_article_details_105197271]: https://blog.csdn.net/qq_35134066/article/details/105197271

发表评论取消回复

表情：

评论列表（有 0 条评论，37人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java实现进度条加载效果

目录前言一、Java Swing实现二、Java for循环遍历实现 -------------------- 前言进度条在我们日常使用的软件中

曾经终败给现在/ 2023年10月16日 15:50/ 0 赞/ 141 阅读

相关实现简单的进度条效果

封装一个简单的jquery插件，实现简单的可滑动进度条。可能一些情况没有考虑到，仅供参考。另外我还写了一篇原生实现滑动进度条的文章，仅仅需要修改样式即可。文章链接如下：[h

淡淡的烟草味﹌/ 2023年07月18日 04:59/ 0 赞/ 38 阅读

相关 vue请求进度条效果

添加请求进度条效果 > 安装nprogress > > 进入项目目录：cd client > 安装依赖包：cnpm i nprogress -S >

港控/mmm°/ 2023年03月12日 07:29/ 0 赞/ 31 阅读

相关实现进度条效果的多种方法

今天想实现的效果有点难度： [https://segmentfault.com/q/1010000037539000][https_segmentfault.com_q_10

旧城等待，/ 2022年12月16日 13:13/ 0 赞/ 287 阅读

相关纯css实现进度条百分比效果

> 一个完整的进度条效果其实可以拆分一下 > 一段背景 > 一小段的静态的斜纹进度条 > 斜纹进度条用线性渐变 linear-gradien

亦凉/ 2022年10月07日 04:59/ 0 赞/ 436 阅读

相关实现一个进度条效果

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schem

左手的ㄟ右手/ 2022年09月24日 04:21/ 0 赞/ 359 阅读

相关 Linux下实现简单进度条

我们在使用计算机不免有拷贝文件或者下载文件的时候，总会看到行行色色的进度条，如下图的两种：下载文件： ![这里写图片描述][SouthEast] 拷贝文件： ![

悠悠/ 2022年07月13日 07:56/ 0 赞/ 341 阅读

相关 Javascript实现简单进度条

<html> <head> <meta charset="utf-8"> <link rel="stylesheet" type

水深无声/ 2022年06月05日 08:17/ 0 赞/ 362 阅读

相关 linuxshell如何实现进度条效果

代码如下： b='' for ((i=0;$i<=100;i+=2)) do printf "PleaseWait:\[%-50s\]%d%%\\

超、凢脫俗/ 2022年04月18日 02:16/ 0 赞/ 1012 阅读

相关 python 实现简单的进度条功能。

import time import sys n = 100 输出，0% sys.stdout.write("0%" +

阳光穿透心脏的1/2处/ 2022年02月04日 12:39/ 0 赞/ 440 阅读