JS进度条特效

效果图

在这里插入图片描述

特效分析

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;
            }
        }
    }
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值