实现可拖动进度条进度条样式自定义

最新推荐文章于 2024-09-10 16:50:14 发布

iUserWang

最新推荐文章于 2024-09-10 16:50:14 发布

阅读量3.6k

点赞数

分类专栏： javascript 进度条文章标签：进度条可拖动

本文链接：https://blog.csdn.net/woteafuck/article/details/98958311

版权

本文介绍了如何实现一个具有可拖动功能且样式可自定义的进度条。通过定义样式、设置页面内容及应用JavaScript，成功创建了横向可拖动的进度条。文中提及参考了其他博主的文章作为实现思路。

摘要由CSDN通过智能技术生成

在工作过程中，UI设计了一个可拖动进度条的样式，如下图。当前进度条要么不能可拖动，要么就是样式不适合。

UI设计图
多方查询后，终于自己写了实现。
1、样式定义 ----根据自身需求，自定义样式

<style type="text/css">
      #openProgress{        //当前未拖动进度条显示样式
            display: inline-block;
            width: 200px;
            height: 10px;
            background: #ddd;
            border-radius: 4px;
            position: relative;
            margin-top:30px;
        }
        #openOld{           //拖动按钮样式
            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;
        }
        #openNew{          //拖动后进度条样式
            width: 0px;