js 实现进度条，杠杆进度条，兼容pc移动端，滑块效果
生活随笔
收集整理的這篇文章主要介紹了
js 实现进度条，杠杆进度条，兼容pc移动端，滑块效果
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果圖：
?
創(chuàng)作不易，請(qǐng)多點(diǎn)贊支持。本版本為jquery實(shí)現(xiàn)，如果你的項(xiàng)目是vue，那么可以按照如下實(shí)現(xiàn)的邏輯改版，也可以繼續(xù)使用jquery實(shí)現(xiàn)。
代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index2.css"> </head> <body><!--變焦--><div class="css-ur3ehs box no_copy"><div class="progress"><div class="progress_bg"><!--底紋背景--><div class="progress_bar"></div><!--填充背景--></div><div class="progress_btn"><div class="text">0%</div></div><!--按鈕--><div class="bn-slider-stepper ml0" data-num="0"></div><div class="bn-slider-stepper ml20" data-num="20"></div><div class="bn-slider-stepper ml40" data-num="40"></div><div class="bn-slider-stepper ml60" data-num="60"></div><div class="bn-slider-stepper ml80" data-num="80"></div><div class="bn-slider-stepper ml100" data-num="100"></div><div class="num ml0"><span>0x</span></div><div class="num ml20"><span>5x</span></div><div class="num ml40"><span>10x</span></div><div class="num ml60"><span>15x</span></div><div class="num ml80"><span>20x</span></div><div class="num ml100"><span>25x</span></div></div></div> </body> </html> <script src="../jquery.3.2.1.min.js"></script> <script> addSlider();//函數(shù)調(diào)用的方式，是內(nèi)部的變量不被污染，生成一個(gè)獨(dú)立的訪問(wèn)空間，雖然沒(méi)有傳參數(shù)。 function addSlider(){// 焦距var tag = false,//拖動(dòng)過(guò)程ox = 0,left = 0,bgleft = 0;var progress_width = $('.progress').width();/**** pc端事件***/$('.progress_btn').mousedown(function(e) {ox = e.pageX - left;$(".text").show();tag = true;$(document).mousemove(function(e) {//鼠標(biāo)移動(dòng) + 圖片變焦 if (tag) {left = e.pageX - ox;if (left <= 0) {left = 0;}else if (left > progress_width) {left = progress_width;}$('.progress_btn').css('left', left);$('.progress_bar').width(left);$('.text').html(parseInt((left/progress_width)*100) + '%');select();}// console.log('left ======= ' + left);});$(document).mouseup(function() {$(".text").hide();tag = false;$(document).unbind("mousemove");});});/**** 移動(dòng)端事件***/// 手指觸摸$('.progress_btn')[0].addEventListener('touchstart', function(e){let pageX=e.targetTouches[0].pageX;ox = pageX - left;$(".text").show();tag = true;// 手指按住移動(dòng)$(document)[0].addEventListener('touchmove',function(e){let pageX=e.targetTouches[0].pageX;if (tag) {left = pageX - ox;if (left <= 0) {left = 0;}else if (left > progress_width) {left = progress_width;}$('.progress_btn').css('left', left);$('.progress_bar').width(left);$('.text').html(parseInt((left/progress_width)*100) + '%');select();}});// 手指離開(kāi)$(document)[0].addEventListener('touchend', function(e) {$(".text").hide();tag = false;$(document).unbind("mousemove");});});/**懸浮按鈕上顯示當(dāng)前進(jìn)度文字**/$('.progress_btn').on("mouseover",function(){$(".text").show();});$('.progress_btn').on("mouseout",function(){if(tag==false){$(".text").hide();}});//點(diǎn)擊背景條$('.progress_bg').click(function(e) {//鼠標(biāo)點(diǎn)擊 + 圖片變焦bgleft = $('.progress_bg').offset().left;left = e.pageX - bgleft;if (left <= 0) {left = 0;}else if (left > progress_width) {left = progress_width;}$('.progress_btn').css('left', left);$('.progress_bar').css({width:left});$('.text').html(parseInt((left/progress_width)*100) + '%');select();});//點(diǎn)擊圓點(diǎn)$(".bn-slider-stepper").on("click",function(e){var that=$(this);var num=that.data("num");$('.progress_bar').css("width",num+'%');$('.progress_btn').css('left', num+'%');$('.text').html(num + '%');left=parseInt((num*progress_width)/100);select();});//判斷是否改變?cè)c(diǎn)樣式function select(){var p=parseInt((left/progress_width)*100);$(".bn-slider-stepper").each(function(){var that=$(this),num=that.data("num");if(p>=num){that.addClass("select");}else{that.removeClass("select");}});} } </script>css：
.css-ur3ehs {box-sizing: border-box;margin: 0px;min-width: 0px;padding-top: 10px;}.bn-slider-stepper {box-sizing: content-box;position: absolute;top:0;left:0;transform: translate(-50%,-20%) rotate(45deg);background-color: #212121;color: rgb(132, 142, 156);width: 10px;height: 10px;border-radius: 50%;border: 3px solid #d9d9d9;z-index: 10;overflow: visible;cursor: pointer;transform: translate(-50%,-50%);top: 50%; } html,body{box-sizing: border-box; }/* 攝像頭調(diào)焦距*/ /*調(diào)焦區(qū)*/ .box{width: 500px;height: 100px;background-color: #ccc;display:flex;align-items:center;padding:40px; } /*進(jìn)度條*/ .progress{display: inline-block;position: relative; width:100%;height: 5px; } .progress_bg{height:100%;border-radius: 5px; overflow: hidden;background-color:#d9d9d9;position: relative;z-index: 0; } .progress_bar{background: #6a6868; width: 0; height:100%;border-radius: 5px;position: relative; } /*進(jìn)度條圓點(diǎn)按鈕*/ .progress_btn{width: 20px; height: 20px; border-radius: 8px; background:#fff; position: absolute;left: 0px; margin-left: -8px; top:-5px; cursor: pointer;border:3px solid #fff;box-sizing:border-box;z-index:999;background-color: #212121;border-radius: 4px;cursor: grab;border-radius:50%;box-sizing: border-box;transition: box-shadow 0.2s ease 0s;transform: translate(0,-50%);top: 50%; } /* .progress_btn:hover .text{display:block; } */ /*禁止復(fù)制*/ .no_copy{moz-user-select:-moz-none;-moz-user-select:none;-o-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text{transform: translate(-50%,0); display:none; /* color:white; */ position:relative;top:-30px;} .bn-slider-stepper:hover{transform:scale(1.2) translate(-50%,-50%);} .bn-slider-stepper span{transform: rotate(-45deg);display: inline-block; }.num{box-sizing: border-box;position:absolute;display:inline-block;} .ml0{margin: 0px 0px 0px 0%;} .ml20{margin: 0px 0px 0px 20%;} .ml40{margin: 0px 0px 0px 40%;} .ml60{margin: 0px 0px 0px 60%;} .ml80{margin: 0px 0px 0px 80%;} .ml100{margin: 0px 0px 0px 100%;} .num span{transform: translate(-50%,15px);display: inline-block;} .select{border: 3px solid #686868;background: #f2f2f2;}總結(jié)
以上是生活随笔為你收集整理的js 实现进度条，杠杆进度条，兼容pc移动端，滑块效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Java基础教程2-安装和配置Eclip
- 下一篇： 如何提高网站的权重