本文主要介紹了jQuery實作可拖曳進度條實例程式碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下,希望能幫助到大家。
html
<p class="progress"> <p class="progress_bg"> <p class="progress_bar"></p> </p> <p class="progress_btn"></p> <p class="text">0%</p> </p>
css
.progress{position: relative; width:300px;margin:100px auto;} .progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;} .progress_bar{background: #5FB878; width: 0; height: 10px; border-radius: 5px;} .progress_btn{width: 20px; height: 20px; border-radius: 5px; position: absolute;background:#fff; left: 0px; margin-left: -10px; top:-5px; cursor: pointer;border:1px #ddd solid;box-sizing:border-box;} .progress_btn:hover{border-color:#F7B824;}
js
#$(function(){ var tag = false,ox = 0,left = 0,bgleft = 0; $('.progress_btn').mousedown(function(e) { ox = e.pageX - left; tag = true; }); $(document).mouseup(function() { tag = false; }); $('.progress').mousemove(function(e) {//鼠标移动 if (tag) { left = e.pageX - ox; if (left <= 0) { left = 0; }else if (left > 300) { left = 300; } $('.progress_btn').css('left', left); $('.progress_bar').width(left); $('.text').html(parseInt((left/300)*100) + '%'); } }); $('.progress_bg').click(function(e) {//鼠标点击 if (!tag) { bgleft = $('.progress_bg').offset().left; left = e.pageX - bgleft; if (left <= 0) { left = 0; }else if (left > 300) { left = 300; } $('.progress_btn').css('left', left); $('.progress_bar').animate({width:left},300); $('.text').html(parseInt((left/300)*100) + '%'); } }); });
效果圖
#實作原理
首先是用mousedown()滑鼠按下事件保存一個狀態值,mouseup()滑鼠抬起事件取消該狀態,再同時配合mousemove()滑鼠移動事件,實現按住拖曳的效果。
在滑鼠移動的同時去改變精度條的長度和按鈕的相對左部的距離。
接著就是距離的計算,主要利用的就是pageX() 屬性。 pageX是滑鼠指標相對於文件的左邊緣的位置。在滑鼠按下是就記錄相對位置,滑鼠移動後就可求滑鼠移動的距離。從而改變按鈕位置和進度條長度。
相關推薦:
#實作jquery-file-upload 檔案上傳帶進度條效果的方法
#以上是jQuery實作可拖曳進度條詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!