进度条---自定义可拖动竖型/纵向进度条

最新推荐文章于 2025-06-27 14:08:59 发布

原创

最新推荐文章于 2025-06-27 14:08:59 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #进度条 #可拖动 #竖型 #进度条样式

本文介绍了一种实现可拖动竖型进度条的方法，针对UI设计的需求，通过调整进度条的宽高属性并使用JavaScript进行交互处理，成功创建了纵向进度条。重点在于高度数据的处理和拖动事件的实现。

在工作过程中，UI设计了一个可拖动进度条的样式，如下图。当前大部分进度条都是横向的，如何实现纵向？

UI设计图
经过多方资料查找，终于被我实现了。此处需要注意的是，将横向进度条高（height）宽（width）数据对调，当拖动进度条时，所涉及的均为高度（height）数据。

1、样式设置

#angleProgress{           //未拖动时进度条
        display: inline-block;
        width: 10px;          //宽度小---与横向进度条相反
        height: 200px;      //高度大---与横向进度条相反
        background: #ddd;
        border-radius: 4px;
        position: relative;
        margin-top:30px;
    }
    #angleOld{              //拖动按钮
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50% 50%;
        background: #ffffff;
        position: absolute;
        margin-top: -4px;
        cursor: pointer;
        box-shadow: 0px 0px 3px #177ad8;
    }
    #angleNew{       //拖动时进度条
        width: 10px;
        height: 0px;
        backgr