<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery手动拖动进度条</title>
<style type="text/css">
#box{
position: relative;
width: 200px;
border: 1px solid transparent;
}
#bg{
height: 2px;
background: #515151;
overflow: hidden;
}
#bgcolor{
background: #1296db;
width: 0;
height: 2px;
border-radius: 5px;
}
#bt{
width: 24px;
height: 24px;
background-color: #fff;
border:1px solid #515151;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: -12px;
left: 0px;
margin-left: -12px;
cursor: pointer;
}
#text{
font-size: 16px;
margin-left:12px;
}
.flex{
display: flex;
align-items: center;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div class="flex">
<div id="box">
<div id="bg">
<div id="bgcolor"></div>
</div>
<div id="bt"></div>
</div>
<div id="text">1年</div>
</div>
<script type="text/javascript">
(function($){
var experience_num=1;
if(experience_num>0){
experience(experience_num);
}
function experience(num){
var $box = $('#box');
var $bg = $('#bg');
var $bgcolor = $('#bgcolor');
var $btn = $('#bt');
var $text = $('#text');
var statu = false;
var ox = 0;
var left = num*20;
var bgleft = num*20;
$btn.css({'left':left});
$bgcolor.width(left);
$btn.mousedown(function(e){
//鼠标指针的位置,相对于文档的左边缘
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/10) + '年');
}
});
$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/10) + '年');
}
});
}
})(jQuery);
</script>
</body>
</html>