首页 > 教程 >

js实现滑动进度条

2023-02-17教程围观次

简介本文实例为大家分享了js实现滑动进度条效果的具体代码，供大家参考，具体内容如下进度条：js滑动进度条效果*{margin:0;padding:0;user-select:none;}.progress-bar{position:relative;height:10px;width:400px;margin:200pxauto;background:#ebeef5;border-radius:10p

本文实例为大家分享了js实现滑动 进度条效果的具体代码，供大家参考，具体内容如下

进度条：

<!DOCTYPE html><html><head>    <  charset="utf-8" />    < >js滑动进度条效果</ >    <style>        *{margin:0;padding:0;user-select:none;}        .progress-bar{position:relative;height:10px;width:400px;margin:200px auto;background:#ebeef5;border-radius:10px;}        .progress-bar .pro-bar{position:absolute;left:0;height:10px;width:10px;background:#409eff;}        .progress-bar .min-num{position:absolute;left:-20px;top:-5px;}        .progress-bar .max-num{position:absolute;right:-40px;top:-5px;}        .progress-bar .block {position:absolute;height:30px;width:10px;background:#ccc;top:-10px;border-radius:10px;}        .progress-bar .block p{position:absolute;display:none;left:-20px;top:-45px;width:50px;height:30px;text-align:center;line-height:30px;background:#ccc;border-radius:20px;}        .progress-bar .block:hover p{display:block;font-size:10%;color:#fff;background:#409eff;}    </style></head><body>    <p class="progress-bar">        <span class="min-num">0</span>        <span class="max-num">100</span>        <p class="pro-bar"></p>        <p class="block">            <p>0</p>        </p>    </p></body>< >(function(){    let moveBlock = document.querySelector('.block');    let proBar = document.querySelector('.pro-bar');    let flag = false;    let startX = null;    let moveMax = (400 - 10); // 背景条宽度减去滑块的宽度    moveBlock.  = function(e){        startX = e.pageX;        moveBlock.style.left ? moveBlock.style.left : moveBlock.style.left = '0px';        let startLeft = parseInt(moveBlock.style.left);        document.  = function(e){            let moveX = (e.pageX - startX) > 0 ? true : false;            let moveSection = startLeft + (e.pageX - startX);            // 限定移动范围            if (moveSection >= 0 && moveSection <= moveMax) {                let percent = ((startLeft + (e.pageX - startX)) / moveMax).toFixed(4) * 100;                percent.toString().length > 5 ? percent = percent.toString().subStr(0, 5) : percent = percent.toString();                moveBlock.style.left = startLeft + (e.pageX - startX) + 'px';                proBar.style.width = moveBlock.style.left;                moveBlock.querySelector('p').innerText = percent + '%';            }        };    };    // 鼠标松开移除事件    moveBlock.  = function(){        document.  = null;    };})();</ ></html>

下载链接：网站源码/小程序源码/网站模板下载

Tags： js 实现滑动进度

上一篇：PHP开发支付宝PC扫码支付/支付宝当面付开发流程
下一篇：了解Ajax Session失效跳转登录页面的方法