jQuery實現(xiàn)可拖動進度條實例代碼
更新時間：2017年06月21日 16:24:08 作者：Storm丶HYL
這篇文章主要介紹了jQuery實現(xiàn)可拖動進度條實例代碼，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
html
<div class="progress">
<div class="progress_bg">
<div class="progress_bar"></div>
</div>
<div class="progress_btn"></div>
<div class="text">0%</div>
</div>
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) + '%');
}
});
});
效果圖
實現(xiàn)原理
首先是用mousedown()鼠標按下事件保存一個狀態(tài)值，mouseup()鼠標抬起事件取消該狀態(tài)，再同時配合mousemove()鼠標移動事件，實現(xiàn)按住拖動的效果。
在鼠標移動的同時去改變精度條的長度和按鈕的相對左部的距離。
然后就是距離的計算，主要利用的就是pageX() 屬性。pageX是鼠標指針相對于文檔的左邊緣的位置。在鼠標按下是就記錄相對位置，在鼠標移動后就可求出鼠標移動的距離。從而改變按鈕位置和進度條長度。
以上所述是小編給大家介紹的jQuery實現(xiàn)可拖動進度條demo，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
在開發(fā)jquery時候經(jīng)常需要用到定位,有相對父元素定位和相對文檔定位，本文為此總結下，有需要的朋友可以參考下2013-08-08
這篇文章主要介紹了jQuery循環(huán)動畫與獲取組件尺寸的方法,實例分析了animate用法及組件的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要為大家分享了Jquery日歷插件e-calendar升級版,e-calendar是一個jQuery插件,創(chuàng)建一個事件日歷它很容易使用,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
jQuery lazyload是一款延遲加載圖片的的插件，原意是按需加載，當圖片出現(xiàn)在可視區(qū)域時進行加載，但是官方的插件經(jīng)過firebug的檢測可知，并不能節(jié)省流量開支，反而有重復加載的現(xiàn)象。2010-11-11
完美兼容各大瀏覽器的jQuery仿新浪圖文淡入淡出間歇滾動特效
本文是作者學習jQuery之后練手之作，兼容各大瀏覽器，非常的精美實用，這里放出來給小伙伴們，有需要的直接拿走，別跟我客氣^_^2014-11-11
這篇文章主要為大家詳細介紹了jquery廣告無縫輪播實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
jQuery動畫效果實現(xiàn)圖片無縫連續(xù)滾動
這篇文章主要為大家介紹了jQuery動畫效果實現(xiàn)圖片無縫連續(xù)滾動，實現(xiàn)類似連續(xù)不間斷的滾動廣告位，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
jQuery使用fadeout實現(xiàn)元素漸隱效果的方法
這篇文章主要介紹了jQuery使用fadeout實現(xiàn)元素漸隱效果的方法,實例分析了jQuery中fadeout方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
基于jQuery和CSS3制作數(shù)字時鐘附源碼下載(jquery篇)
本篇文章基于jquery讓數(shù)字時鐘真正的跑起來，實現(xiàn)一個帶有日期和星期的網(wǎng)頁版數(shù)字時鐘，效果非常逼真，感興趣的朋友一起看看吧2015-11-11
這篇文章主要介紹了jquery實現(xiàn)兩個圖片漸變切換效果的方法,涉及jquery針對圖片的顯示與隱藏效果的實現(xiàn)技巧,需要的朋友可以參考下2015-06-06