JS进度条特效

JS进度条特效效果图特效分析HTML1、外层大的div2、灰色底条3、灰色上有橙色进度条进度部分4、橙色方条前面有一个小块5、还有进度百分比<divid=”progress”><divid=”bar”><divid=”front”></div><span></span>…

效果图

在这里插入图片描述

特效分析

HTML

1、外层大的div
2、灰色底条
3、灰色上有橙色进度条进度部分
4、橙色方条前面有一个小块
5、还有进度百分比

<div id="progress">
    <div id="bar">
        <div id="front"></div>
        <span></span>
    </div>
    <div id="Value">0%</div>
</div>
CSS

1、由于橙色进度条和拖动块,都在灰色条上,所以使用定位。设置好初始位置
2、灰色底条边框、橙色条边框、以及拖动块边框需要调整样式
3、当鼠标在拖动块上时,cursor为pointer

      *{ 
   
            margin: 0;
            padding: 0;
            border: none;
            list-style: none;
        }
        #progress{ 
   
            width: 1000px;
            height: 35px;
            line-height: 35px;
           background-color: #e8e8e8;
            margin: 100px auto;
            position: relative;
        }
        #bar{ 
   
            width: 900px;/*预留文字*/
            height: 100%;
            background-color: #ccc;
            border-radius: 8px;
            position: relative;
        }
        #Value{ 
   
            position: absolute;
            right: 30px;
            top: 0px;
        }
        #front{ 
   
            width: 0px;
            height: 100%;
            background-color: orangered;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }
        span{ 
   
            width: 25px;
            height: 50px;
            background-color: orangered;
            position: absolute;
            left: 0px;
            top: -7px;
            border-radius: 5px;
            cursor: pointer;
        }

JS

事件分析:

1、鼠标按住拖动块进行移动:onmousedown(按住)onmousemove(移动)。移动事件在按住事件中进行。
2、鼠标松开,进度条不动:onmouseup

事件触发时改变:
1、在鼠标移动时,拖动块跟着移动。

且拖动块只能在灰色底条的范围内移动。

鼠标移动时,橙色进度条的宽度也会改变。

百分比随着鼠标的移动按照比例发生改变。

2、鼠标抬起时,鼠标的移动事件关闭

事件源:
1、橙色进度条(front)
2、橙色拖动块(mask)
3、百分比(Value)

要求的值:
1、鼠标移动时的位置。
3、在初始位置时拖块的位置
2、以及鼠标点击后移动的距离初始位置的长度
4、最后把鼠标移动之后的长度给橙色进度条的width
5、然后用块条的距离值/(橙色进度条-橙色拖动块)*100最后取整就可以了
在这里插入图片描述

window.onload = function () { 
   
        //1、获取
        var progress=document.getElementById("progress");
        var bar=progress.children[0];
        var Value=progress.children[1];
        var front = bar.children[0];
        var mask=bar.children[1];
        //2、监听鼠标按下
        mask.onmousedown = function (event) { 
   
            var e = event || window.event;
            //2、获取初识位置
            var offsetLeft = event.clientX - mask.offsetLeft;
            //2\2监听鼠标的移动
            document.onmousemove = function (event) { 
   
                var e = event || window.event;
                //2\获取移动的位置
                var x = e.clientX - offsetLeft;
                if (x < 0) x = 0;
                else if (x >= bar.offsetWidth - mask.offsetWidth) x = bar.offsetWidth - mask.offsetWidth;
                mask.style.left = x + "px";
                front.style.width = x + "px";
                Value.innerHTML = parseInt(x / (bar.offsetWidth - mask.offsetWidth) * 100) + "%";
                return false;
            }
            //2、监听鼠标抬起
            mask.onmouseup = function (event) { 
   
                document.onmousemove = null;
            }
        }
    }

今天的文章JS进度条特效分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/29003.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注