生活随笔
收集整理的這篇文章主要介紹了
原生js进度条特效
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
進度條特效
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title> 進度條特效</title><style type="text/css">* {padding: 0;margin: 0;}#progress {width: 600px;height: 35px;line-height: 35px;margin: 100px auto;position: relative;}#progress_bar {position: relative;width: 500px;height: 100%;background-color: #CCCCCC;border-radius: 8px;}#progress_bar_current {width: 0;height: 100%;background-color: orange;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}#bar {position: absolute;width: 25px;height: 50px;background-color: orange;top: -5px;left: 0;border-radius: 8px;cursor: pointer;}#progress_value {position: absolute;right: 30px;top: 0;}</style></head><body><div id="progress"><div id="progress_bar"><div id="progress_bar_current"></div><span id="bar"></span></div><div id="progress_value">0%</div></div><script type="text/javascript">window.onload = function() {// 1.需要的標簽var progress = document.getElementById('progress');var progress_bar = progress.children[0];var progress_value = progress.children[1];var progress_bar_current = progress_bar.children[0];var bar = progress_bar.children[1];// 2.監聽鼠標摁下bar.onmousedown = function(e) {e = e || window.event;// 2.1 獲取初始距離var offsetLeft = progress.offsetLeft;// 2.2 監聽鼠標移動document.onmousemove = function(e) {e = e || window.event;//2.3 獲取移動的距離var x = e.clientX - offsetLeft;// 2.4 邊界處理if (x < 0) {x = 0;} else if (x >= progress_bar.offsetWidth - bar.offsetWidth) {x = progress_bar.offsetWidth - bar.offsetWidth;}// 2.5 移動bar.style.left = x + 'px';progress_bar_current.style.width = x + 'px';progress_value.innerHTML = parseInt((x / (progress_bar.offsetWidth - bar.offsetWidth)) * 100) + '%';}document.onmouseup = function() {console.log('鼠標彈起了');document.onmousemove = null;}}}</script></body>
</html>
總結
以上是生活随笔為你收集整理的原生js进度条特效的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
