简单jquery代码实现拖拉进度条数值效果

通过拖拉进度条改变指定数值。

HTML代码

<div class="data">
	(  <i data="20">0.7</i> 元  )
</div>
<div class="drag">
	<div class="line">
		<div class="v"></div>
		<div class="star"></div>
	</div>
</div>

CSS代码

.drag {overflow:hidden;padding:8.5px 18px 8.5px 4px;}
.line {height:3px;background-color:#d3d3d3;position:relative;}
.v {background-color:#0732a3;width:0;height:3px;position:relative;}
.star {width:22px;height:20px;background:url(../images/icon_1.png) no-repeat center center;background-size:contain;position:absolute;left:0;top:50%;margin-left:-4px;margin-top:-10px;cursor:move;}

PS：样式请在这个基础上自行调整

jQuery代码

$(function(){
	var obj; 
	var move = false; 
	var left = 0; 
	var defaultX = 0; 
	var line = 0; 
	var pixel = 0; 
	$('.star').mousedown(function(e){
		obj = $(this); //获取当前元素
		move = true; 	
		left = obj.position().left; //按钮位置	
		defaultX = e.pageX - left; //pageX的值 - 拖拉按钮的 left 值 = 进度条的pageX的值		
		line = Number(obj.parents('.line').width()); // 获取line的宽度，并把字符串转换可计算的数值
		pixel = Number(obj.parents('.drag').siblings('.data').children('i').attr('data')) / line; // 计算拖拉1px 等于 多少 元
	});
	$(document).mouseup(function(){
		move = false; 
	});
	$(document).mousemove(function(e){
		if(move){
			left = e.pageX - defaultX; //鼠标移动时的pageX值 减去 进度条的pageX值 就是 进度条的宽度，也拖拉按钮的 left 值
			if(left < 0){  //可以理解为进度条宽度=0时
				left = 0;
			}
			if(left > line) { //进度条的最大宽度不超链进度的最大宽度
				left = line;
			}
			obj.css('left',left); //重新定义拖拉按钮的位置
			obj.siblings().width(left); //重新定义进度条的长度
			obj.parents('.drag').siblings('.data').children('i').text((pixel * left).toFixed(2)); //改变金额的大小
		}
	});
});