效果圖

特效分析

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;}}}

總結

以上是生活随笔為你收集整理的JS进度条特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。