實現拖拽進度條
阿新 • • 發佈：2018-12-24
用到了拖拽功能
<style> .wrap{ width:500px; border: 1px solid; padding: 20px; } .process{ position: relative; width:80%; height: 30px; background-color: #dddddd; border-radius: 2px; } .process-bar{ width: 0%; height: 30px; background-color: #187aab; border-radius: 2px; } .bar{ top: -5px; left: -5px; position: absolute; width: 10px; height: 40px; border-radius: 2px; background-color: #91cdea; display: inline-block; } </style> </head> <body> <div class="wrap"> <div class="process"> <div class="process-bar"></div> <span class="bar" id="mybar"></span> </div> </div> <script src="../js/libs/jquery-1.11.3.min.js"></script> <script> var isDrag = false; var fullwidth = $(".process").width(); var mouseX,left; $("#mybar").bind("mousedown", function (e) { isDrag = true; mouseX = e.clientX; left = $(this).position().left; console.log(mouseX+" "+left); return false; }); $(document).bind("mousemove", function (e) { if(isDrag){ var mX = e.clientX; var l = mX-mouseX+left; console.log(mX+" "+l); if(l<-5){ l=-5; }else if(l>fullwidth-5){ l=fullwidth-5; } $("#mybar").css('left',l); var p = Math.round((l+5)*100/fullwidth); $(".process-bar").css('width',p+'%'); } }); $(document).bind("mouseup", function () { isDrag = false; return false; }) //點選 到點選處 $(".process").click(function (e) { if(!isDrag){ var eX = e.clientX; var l = $("#mybar").offset().left; var l1 = $("#mybar").position().left; var ox = eX-l; var w = $(".process-bar").width(); var p = (w+ox)*100/fullwidth; $(".process-bar").css('width',p+'%'); $("#mybar").css('left',l1+ox); console.log(eX+" "+l+" "+w+" "+p); } }) </script>
效果