當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
十五、JavaScript进度条的制作
生活随笔
收集整理的這篇文章主要介紹了
十五、JavaScript进度条的制作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
@Author：Runsen
@Date：2019/3/25
進度條經常運用于網頁，即使我們意識到不是所有的東西都將瞬間被加載完成，這些進度條用于提醒使用者關于網頁上具體的任務進程，譬如上傳，下載，加載應用程序等
文章目錄
- 百分比動態進度條
- 布局
- 代碼
- 商品展示
- 彈性導航
百分比動態進度條
實現的效果就是上面所示。當拉動進度條，就會顯現百分比。
布局
其實就是大盒嵌套小盒子，
<div id="progress"><div id="progress_bar"><div id="progress_bar_fg"></div><span></span></div><div id="progress_value">0%</div></div>代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;list-style: none;border: none;}#progress{width: 1000px;height: 35px;line-height: 35px;/*background-color: #e8e8e8;*/margin: 100px auto;position: relative;}#progress_bar{width: 900px;height: 100%;background-color: #ccc;border-radius: 8px;position: relative;}#progress_value{position: absolute;right: 30px;top: 0;}#progress_bar_fg{width: 0;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: 0;top: -7px;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><script>window.onload = function () {// 1. 獲取需要的標簽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];// 2. 監聽鼠標按下mask.onmousedown = function (event) {var e = event || window.event;// 2.1 獲取初始位置var offsetLeft = event.clientX - mask.offsetLeft;// 2.2 監聽鼠標的移動document.onmousemove = function (event) {var e = event || window.event;// 2.3 獲取移動的位置var x = e.clientX - offsetLeft;// 邊界值處理if(x < 0){x = 0;}else if(x >= progress_bar.offsetWidth - mask.offsetWidth){x = progress_bar.offsetWidth - mask.offsetWidth;}// 2.4 走起來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;};// 2.5 監聽鼠標抬起document.onmouseup = function () {document.onmousemove = null;}}} </script> </body> </html>商品展示
商品展示，拉動的時候展示對應的商品
彈性導航
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;border:0;list-style: none;}body{background-color: pink;}#nav{width: 900px;height: 63px;background:url("images/doubleOne.png") no-repeat rightcenter #fff;border-radius: 5px;position: relative;margin: 100px auto;}#nav ul{position: relative;}#nav ul li{float: left;width: 88px;height: 63px;text-align: center;line-height: 70px;cursor: pointer;}#t_mall{width: 88px;height: 63px;background: url("images/tMall.png") no-repeat;position: absolute;}</style> </head> <body> <nav id="nav"><span id="t_mall"></span><ul><li>雙11狂歡</li><li>服裝會場</li><li>數碼家電</li><li>家具建材</li><li>母嬰童裝</li><li>手機會場</li><li>美妝會場</li><li>進口會場</li><li>飛豬旅行</li></ul> </nav> <script>window.onload = function () {// 1. 獲取需要的標簽var nav = $("nav");var t_mall = nav.children[0];var ul = nav.children[1];var allLis = ul.children;// 記錄鼠標點擊的位置var beginX = 0;// 2. 遍歷for(var i=0; i<allLis.length; i++){var li = allLis[i];// 2.1 監聽鼠標進入li.onmouseover = function () {end = this.offsetLeft;};// 2.2 監聽鼠標按下事件li.onmousedown = function () {beginX = this.offsetLeft;};// 2.2 監聽鼠標離開事件li.onmouseout = function () {end = beginX;}}// 3.緩動動畫var begin = 0, end =0;setInterval(function () {begin = begin + (end - begin) * 0.1;t_mall.style.left = begin + "px";}, 10);function $(id) {return typeof id === "string" ? document.getElementById(id) : null;}} </script> </body> </html>素材代碼下載
總結
以上是生活随笔為你收集整理的十五、JavaScript进度条的制作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 银行信托产品安全吗
- 下一篇： 六十、第一个SpringBoot的 he