进度条

最新推荐文章于 2024-03-29 17:54:27 发布

银翼的魔术师s

最新推荐文章于 2024-03-29 17:54:27 发布

阅读量102

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_41423378/article/details/111463686

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

借鉴： https://blog.csdn.net/woteafuck/article/details/98958311?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html Mathlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>进度条</title>

    <style type="text/css">

        html,body{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

          /*当前未拖动进度条显示样式*/
          .rangeBox{
                width: 200px;
                height: 10px;
                background: #ddd;
                border-radius: 4px;
                position: relative;
                cursor: pointer;
            }
            /*拖动按钮样式*/
            .rangeSlider{
                display: inline-block;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background: #ffffff;
                position: absolute;
                top: 50%;
                transform: translate(-50%,-50%);
                cursor: pointer;
                box-shadow: 0px 0px 3px #177ad8;
            }
            /*拖动后进度条样式*/
            .rangeActivate{
                width: 0px;
                height: 100%;
                background-color: #2d8eff;
                border-radius: 4px;
            }

        </style>



</head>
<body>




    <div style="height: 300px;display: flex;flex-direction: column;justify-content: space-around;">

        <div class="rangeBox">
            <div class="rangeSlider"></div>
            <div class="rangeActivate"></div>
        </div>


        <div class="rangeBox">
            <div class="rangeSlider"></div>
            <div class="rangeActivate"></div>
        </div>

    </div>




     <script type="text/javascript">


        window.onload = function () {

            var s0 = new scale(document.querySelectorAll(".rangeBox")[0]);
            var s1 = new scale(document.querySelectorAll(".rangeBox")[1]);

            s0.setCurrentValue(90)
            s0.setMaxValue(100)

            s0.setSliderHiddenFlag(true)

            s1.setCurrentValue(50)
            s1.setMaxValue(200)

            s0.setOnCurrentValueMoveIng(function (currentValue, maxValue) {
                s1.setCurrentAndMaxValue(currentValue, maxValue)
            })

            s0.setOnCurrentValueMoveEnd(function (currentValue, maxValue) {
                s1.setCurrentAndMaxValue(currentValue, maxValue)
            })


            s1.setOnCurrentValueMoveIng(function (currentValue, maxValue) {
                // console.log("s1 setOnCurrentValueMoveIng", currentValue, maxValue)
            })

            s1.setOnCurrentValueMoveEnd(function (currentValue, maxValue) {
                console.log("s1 setOnCurrentValueMoveEnd", currentValue, maxValue)
            })


        }


        const scale =function(rangeBox){

            var self = this

            self.rangeBox = rangeBox;
            self.rangeSlider = rangeBox.querySelector(".rangeSlider");      //拖动按钮
            self.rangeActivate = rangeBox.querySelector(".rangeActivate");   //拖动后的进度条

            self.xUsableFlag = false;   //是否可滑动
            self.currentValue = 0;      //当前值
            self.maxValue = 100;        //最大值
            self.sliderHiddenFlag = false;//不动时候滑块是否隐藏
            //滑动中的事件回调
            self.onCurrentValueMoveIng = function(currentValue, maxValue){};
            //滑动结束的事件回调
            self.onCurrentValueMoveEnd = function(currentValue, maxValue){};


            //设置当前值
            self.setCurrentValue = function(currentValue){
                self.currentValue = currentValue
                var totalWidth = self.rangeBox.offsetWidth
                var targetX = (self.currentValue / self.maxValue) * totalWidth
                self.moveToLocation(targetX, totalWidth)
            };

            //设置最大值
            self.setMaxValue = function(maxValue){
                self.maxValue = maxValue
                self.setCurrentValue(self.currentValue)
            };

            //设置当前值 和 最大值
            self.setCurrentAndMaxValue = function(currentValue, maxValue){
                self.currentValue = currentValue
                self.setMaxValue(maxValue)
            };

            //设置滑动中的事件回调
            self.setOnCurrentValueMoveIng = function(fun){
                self.onCurrentValueMoveIng = fun
            };

            //设置滑动中的事件回调
            self.setOnCurrentValueMoveEnd = function(fun){
                self.onCurrentValueMoveEnd = fun
            };

            //设置不动时候滑块是否隐藏
            self.setSliderHiddenFlag = function(sliderHiddenFlag){
                self.sliderHiddenFlag = sliderHiddenFlag
                self.rangeSlider.style.display = 'none';
            }

            //移动到某个位置
            self.moveToLocation = function(targetX, totalWidth){
                var moveX = Math.min(totalWidth, Math.max(0, targetX));
                self.rangeSlider.style.marginLeft = moveX +"px";
                self.rangeActivate.style.width = moveX +"px";
            };
            //移动
            self.moveEvent = function(e) {
                var X =e.clientX;        //获取当前元素相对于窗口的X左边
                var targetX = X - self.rangeBox.offsetLeft;
                var totalWidth = self.rangeBox.offsetWidth
                self.moveToLocation(targetX, totalWidth)

                var temp_value = (targetX / totalWidth) * self.maxValue
                self.currentValue = Math.min(self.maxValue, Math.max(0, temp_value));
                self.onCurrentValueMoveIng(self.currentValue, self.maxValue)
            };
            //当鼠标移动
            document.body.addEventListener('mousemove', function (e) {
                if (self.xUsableFlag == true){
                    self.moveEvent(e)
                }
                if (self.sliderHiddenFlag && false == (self.xUsableFlag == true || e.target == self.rangeBox || e.target == self.rangeSlider || e.target == self.rangeActivate)) {
                    self.rangeSlider.style.display = 'none';
                }
            });
            //当鼠标抬起时
            document.body.addEventListener('mouseup', function (e) {
                self.xUsableFlag =false;
                //防止并 self有多个
                if (scale.current == self){
                    self.onCurrentValueMoveEnd(self.currentValue, self.maxValue)
                    if (self.sliderHiddenFlag && false == (self.xUsableFlag == true || e.target == self.rangeBox || e.target == self.rangeSlider || e.target == self.rangeActivate)) {
                        self.rangeSlider.style.display = 'none';
                    }
                }
            });
            //当进度条上鼠标进入时
            self.rangeBox.onmouseenter =function(e){
                self.rangeSlider.style.display = 'block';
            };
            //当进度条上鼠标按下时
            self.rangeBox.onmousedown =function(e){
                scale.current = self
                self.xUsableFlag =true;
                self.moveEvent(e);
            };

         }



    </script>


</body>
</html>

银翼的魔术师s

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
进度条

引用： https://blog.csdn.net/u013347241/article/details/51560290?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-9.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-9.control
复制链接

扫一扫

专栏目录