利用html实现进度条拖动,jQuery实现的手动拖动控制进度条效果示例【测试可用】...

本文实例讲述了jQuery实现的手动拖动控制进度条效果。分享给大家供大家参考，具体如下：

这是一个手动控制进度条的小程序，分享给大家：

www.ddpool.cn jQuery手动拖动进度条

#box{position: relative; width: 200px; height: 50px; border: 1px solid #eee; margin: 50px auto 0;}

#bg{height: 10px; margin-top: 19px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;}

#bgcolor{background: #5889B2; width: 0; height: 10px; border-radius: 5px;}

#bt{width: 34px; height: 34px;background-color: red; border-radius: 17px; overflow: hidden; position: absolute; left: 0px; margin-left: -17px; top: 8px; cursor: pointer;}

#text{width: 200px; margin: 0 auto; font-size: 16px; line-height: 2em;}

(function($){

var $box = $('#box');

var $bg = $('#bg');

var $bgcolor = $('#bgcolor');

var $btn = $('#bt');

var $text = $('#text');

var statu = false;

var ox = 0;

var lx = 0;

var left = 0;

var bgleft = 0;

$btn.mousedown(function(e){

lx = $btn.offset().left;

ox = e.pageX - left;

statu = true;

});

$(document).mouseup(function(){

statu = false;

});

$box.mousemove(function(e){

if(statu){

left = e.pageX - ox;

if(left < 0){

left = 0;

}

if(left > 200){

left = 200;

}

$btn.css('left',left);

$bgcolor.width(left);

$text.html('位置:' + parseInt(left/2) + '%');

}

});

$bg.click(function(e){

if(!statu){

bgleft = $bg.offset().left;

left = e.pageX - bgleft;

if(left < 0){

left = 0;

}

if(left > 200){

left = 200;

}

$btn.css('left',left);

$bgcolor.stop().animate({width:left},200);

$text.html('位置:' + parseInt(left/2) + '%');

}

});

})(jQuery);