JS之滾動條效果
阿新 • • 發佈：2018-09-08
mas 接下來 sem 分析 -c -s htm adding 開始
滾動條在前端頁面中是進行見到的，但是在不同的瀏覽器中，默認的滾動條樣式不同，有些瀏覽器的默認樣式也不好更改，因此，我們可以自定義滾動條，接下來就從一個實例開始進入滾動條。
簡易進度條
首先要實現的是上面的這種效果：當鼠標拖拽手柄前後移動時，滾動條的填充色和右側的百分比隨之一起變化。
為了實現上面效果，我們先來分析頁面結構：一個基本的大容器，用來存放所有相關的東西：左側是進度條相關部分，右側用來顯示百分比的數字，其中左側又分為通過寬度變化來顯示進度的一部分和可拖動的手柄部分。因為手柄部分是可以拖動的，所以要采用相對定位，初始化時left為0；初始化的時候，進度為0，所以寬度變化的部分在初始化的時候，寬度為0。具體的結果如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>進度條</title> <style> *{ margin: 0; padding: 0; list-style: none; border: none; } #progress{ width: 700px; height: 30px; line-height: 30px; margin: 100px auto; position: relative; } #progress_bar{ width: 600px; height: 100%; background-color: #ccc; border-radius: 20px; position: relative; } #progress_value{ position: absolute; right: 30px; top: 0; } #progress_bar_fg{ width: 0; height: 100%; background-color: rgb(0, 162, 255); border-top-left-radius: 20px; border-bottom-left-radius: 20px; } span{ width: 20px; height: 41px; background-color: rgb(0, 162, 255); position: absolute; left: 0; top: -6px; border-radius: 5px; cursor: pointer; } </style> </head> <body> <div id="progress"> <div id="progress_bar"> <div id="progress_bar_fg"></div> <span></span> </div> <div id="progress_value">0%</div> </div> </body> </html>
接下來就是事件處理了，簡單的整理一下思路：
- 手柄的鼠標事件，根據每次鼠標的坐標變化來改變手柄的相對定位。
- 手柄的left值就是進度條變化的部分的寬度
- 變化部分的寬度與整個進度條的寬度比就是右邊部分的百分比值。
<script> window.onload = function () { //獲取需要的標簽 var progress = document.getElementById("progress"); var progress_bar = progress.children[0]; var progress_bar_fg = progress_bar.children[0]; var mask = progress_bar.children[1]; var progress_value = progress.children[1]; //監聽鼠標按下 mask.onmousedown = function (event) { var e = event || window.event; //獲取初始位置(鼠標的坐標位置是相對整個屏幕的，但手柄的移動是相對於滾動條容器的，所以需要進行減法操作) var offsetLeft = event.clientX - mask.offsetLeft; //監聽鼠標的移動 document.onmousemove = function (event) { var e = event || window.event; //獲取移動的位置 var x = e.clientX - offsetLeft; // 邊界值處理 if(x < 0){ x = 0; }else if(x >= progress_bar.offsetWidth - mask.offsetWidth){ x = progress_bar.offsetWidth - mask.offsetWidth; } //根據鼠標移動運動起來 mask.style.left = x + ‘px‘; progress_bar_fg.style.width = x + ‘px‘; progress_value.innerHTML = parseInt(x / (progress_bar.offsetWidth - mask.offsetWidth) * 100) + ‘%‘; return false; }; //監聽鼠標擡起 document.onmouseup = function () { document.onmousemove = null; } } } </script>
好啦，簡易的滾動條效果就做好了。
完整詳細代碼下載：點這裏
JS之滾動條效果