爱学习的小菜鸡

欢迎各位朋友关注并点赞

导航

拖动进度条的制作

 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10             list-style: none;
 11             border: none;
 12         }
 13 
 14         #progress{
 15             width: 1000px;
 16             height: 35px;
 17             line-height: 35px;
 18             /*background-color: #e8e8e8;*/
 19             margin: 100px auto;
 20 
 21             position: relative;
 22         }
 23 
 24         #progress_bar{
 25             width: 900px;
 26             height: 100%;
 27             background-color: #ccc;
 28             border-radius: 8px;
 29 
 30             position: relative;
 31         }
 32 
 33         #progress_value{
 34             position: absolute;
 35             right: 30px;
 36             top: 0;
 37         }
 38 
 39         #progress_bar_fg{
 40             width: 0;
 41             height: 100%;
 42             background-color: orangered;
 43             border-top-left-radius: 8px;
 44             border-bottom-left-radius: 8px;
 45         }
 46 
 47         span{
 48             width: 25px;
 49             height: 50px;
 50             background-color: orangered;
 51 
 52             position: absolute;
 53             left: 0;
 54             top: -7px;
 55             border-radius: 5px;
 56             cursor: pointer;
 57         }
 58     </style>
 59 </head>
 60 <body>
 61     <div id="progress">
 62         <div id="progress_bar">
 63             <div id="progress_bar_fg"></div>
 64             <span></span>
 65         </div>
 66         <div id="progress_value">0%</div>
 67     </div>
 68 
 69 <script>
 70     window.onload = function () {
 71         // 1. 获取需要的标签
 72         var progress = document.getElementById("progress");
 73         var progress_bar = progress.children[0];
 74         var progress_bar_fg = progress_bar.children[0];
 75         var mask = progress_bar.children[1];
 76         var progress_value =  progress.children[1];
 77 
 78         // 2. 监听鼠标按下
 79         mask.onmousedown = function (event) {
 80             var e = event || window.event;
 81 
 82             // 2.1 获取初始位置
 83             var offsetLeft = event.clientX - mask.offsetLeft;
 84 
 85             // 2.2 监听鼠标的移动
 86             document.onmousemove = function (event) {
 87                 var e = event || window.event;
 88 
 89                 // 2.3 获取移动的位置
 90                 var x = e.clientX - offsetLeft;
 91 
 92                 // 边界值处理
 93                 if(x < 0){
 94                     x = 0;
 95                 }else if(x >= progress_bar.offsetWidth - mask.offsetWidth){
 96                     x = progress_bar.offsetWidth - mask.offsetWidth;
 97                 }
 98 
 99                 // 2.4 走起来
100                 mask.style.left = x + 'px';
101                 progress_bar_fg.style.width = x + 'px';
102                 progress_value.innerHTML = parseInt(x / (progress_bar.offsetWidth - mask.offsetWidth) * 100) + '%';
103 
104                 return false;
105             };
106 
107             // 2.5 监听鼠标抬起
108             document.onmouseup = function () {
109                 document.onmousemove = null;
110             }
111         }
112     }
113 </script>
114 </body>
115 </html>

 

posted on 2024-12-05 17:00  一定W  阅读(20)  评论(0)    收藏  举报