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)松開移除事件
moveBlock.onmouseup = function(){
document.onmousemove = null;
};
})();
</script>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天做了群友發(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
微信小程序開發(fā)之點(diǎn)擊按鈕退出小程序的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序開發(fā)之點(diǎn)擊按鈕退出小程序的實(shí)現(xiàn)方法,本恩通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
在本篇文章里小編給大家分享的是關(guān)于JS面試題中深拷貝的實(shí)現(xiàn)講解，需要的朋友們可以參考下。2020-05-05
async函數(shù)是使用async關(guān)鍵字聲明的函數(shù)。 async函數(shù)是AsyncFunction構(gòu)造函數(shù)的實(shí)例， 并且其中允許使用await關(guān)鍵字。async和await關(guān)鍵字讓我們可以用一種更簡(jiǎn)潔的方式寫出基于Promise的異步行為，而無(wú)需刻意地鏈?zhǔn)秸{(diào)用promise2022-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
這篇文章主要為大家詳細(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ì)稱加密算法、非對(duì)稱加密算法和哈希函數(shù)等,本文給大家介紹使用js驗(yàn)證hash,content hash , chunk hash的區(qū)別解析,感興趣的朋友跟隨小編一起看看吧2024-12-12