js實(shí)現(xiàn)滑動(dòng)進(jìn)度條效果

更新時(shí)間：2020年08月21日 14:18:33 作者：#麻辣小龍蝦#

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滑動(dòng)進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)滑動(dòng)進(jìn)度條效果的具體代碼，供大家參考，具體內(nèi)容如下

進(jìn)度條：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>js滑動(dòng)進(jìn)度條效果</title>
 <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 div{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 div{display:block;font-size:10%;color:#fff;background:#409eff;}
 </style>
</head>
<body>
 <div class="progress-bar">
 <span class="min-num">0</span>
 <span class="max-num">100</span>
 <div class="pro-bar"></div>
 <div class="block">
  <div>0</div>
 </div>
 </div>
</body>
<script>
 (function(){
 let moveBlock = document.querySelector('.block');
 let proBar = document.querySelector('.pro-bar');
 let flag = false;
 let startX = null;
 let moveMax = (400 - 10); // 背景條寬度減去滑塊的寬度
 moveBlock.onmousedown = function(e){
  startX = e.pageX;
  moveBlock.style.left ? moveBlock.style.left : moveBlock.style.left = '0px';
  let startLeft = parseInt(moveBlock.style.left);
  document.onmousemove = function(e){
  let moveX = (e.pageX - startX) > 0 ? true : false;
  let moveSection = startLeft + (e.pageX - startX);
  // 限定移動(dòng)范圍
  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('div').innerText = percent + '%';
  }
  };
 };
 // 鼠標(biāo)松開(kāi)移除事件
 moveBlock.onmouseup = function(){
  document.onmousemove = null;
 };
 })();
</script>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

一些javascript一些題目的解析
今天做了群友發(fā)的一個(gè)鏈接, 關(guān)于js 的一些題目的. 這樣的題目常常有很多陷阱在里面,等著別人去踩. 很不幸,灑家踩了, 還蠻悲劇.
2010-12-12
純JavaScript實(shí)現(xiàn)HTML5 Canvas六種特效濾鏡示例
實(shí)現(xiàn)了六款簡(jiǎn)單常見(jiàn)HTML5 Canvas特效濾鏡，并且封裝成一個(gè)純JavaScript可調(diào)用的API文件gloomyfishfilter.js，程序源代碼如下，感興趣的朋友可以參考下哈
2013-06-06
JavaScript?onclick點(diǎn)擊事件-點(diǎn)擊切換圖片且自動(dòng)播放
這篇文章主要介紹了JavaScript?onclick點(diǎn)擊事件-點(diǎn)擊切換圖片且自動(dòng)播放，在頁(yè)面中放圖片并設(shè)置四個(gè)button，可以通過(guò)點(diǎn)擊上一張下一張來(lái)切換圖片，下面來(lái)看看具體的實(shí)現(xiàn)過(guò)程吧
2022-01-01
微信小程序開(kāi)發(fā)之點(diǎn)擊按鈕退出小程序的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序開(kāi)發(fā)之點(diǎn)擊按鈕退出小程序的實(shí)現(xiàn)方法,本恩通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-04-04
JS面試題中深拷貝的實(shí)現(xiàn)講解
在本篇文章里小編給大家分享的是關(guān)于JS面試題中深拷貝的實(shí)現(xiàn)講解，需要的朋友們可以參考下。
2020-05-05
JavaScript異步編程中async函數(shù)詳解
async函數(shù)是使用async關(guān)鍵字聲明的函數(shù)。 async函數(shù)是AsyncFunction構(gòu)造函數(shù)的實(shí)例，并且其中允許使用await關(guān)鍵字。async和await關(guān)鍵字讓我們可以用一種更簡(jiǎn)潔的方式寫(xiě)出基于Promise的異步行為，而無(wú)需刻意地鏈?zhǔn)秸{(diào)用promise
2022-11-11
JavaScript實(shí)現(xiàn)可動(dòng)的canvas環(huán)形進(jìn)度條
這篇文章主要介紹了如何利用JavaScript canvas繪制一個(gè)可以動(dòng)的環(huán)形進(jìn)度條。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手試一試
2022-02-02
js實(shí)現(xiàn)移動(dòng)端輪播圖
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)移動(dòng)端輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
Bootstrap企業(yè)網(wǎng)站實(shí)戰(zhàn)項(xiàng)目4
這篇文章主要為大家分享了Bootstrap企業(yè)網(wǎng)站實(shí)戰(zhàn)項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
使用js驗(yàn)證hash,content hash , chunk hash的區(qū)別解
crypto-js是一個(gè)JavaScript加密算法庫(kù),用于實(shí)現(xiàn)各種加密算法和哈希函數(shù),它提供了一種簡(jiǎn)單而強(qiáng)大的方式來(lái)執(zhí)行加密操作,包括對(duì)稱(chēng)加密算法、非對(duì)稱(chēng)加密算法和哈希函數(shù)等,本文給大家介紹使用js驗(yàn)證hash,content hash , chunk hash的區(qū)別解析,感興趣的朋友跟隨小編一起看看吧
2024-12-12