清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>
<!-- 购买时长 S -->
<html>
<head>
<meta charset="utf-8" />
<title>Slider</title>
<style type="text/css">
.uc-slider .unit i{background: url("month_chinese.png") no-repeat;}
.uc-slider{position: relative; display: inline-block; height: 26px; background-color: #f9f9f9; padding: 0 7px; border-radius: 4px; vertical-align: bottom; *vertical-align: text-bottom;}
.uc-slider .range{position: relative; height: 26px; background-color: #f9f9f9; border-radius: 4px;}
.uc-slider .range .block{display: inline-block; height: 24px;}
.uc-slider .block div{border-right: solid 1px #e6e6e6; height: 24px; padding: 1px 10px 1px 0; text-align: right;}
.uc-slider .block span{float: right; display: inline; line-height: 2; font-size: 12px; color: #999;}
.uc-slider .block .last{border-width: 0; padding-right: 11px;}
.uc-slider .container{position: absolute; left: -7px; top:0; width:0%; height: 24px; border: solid 1px #6dc5dc; padding: 0 6px; overflow: hidden; background-color: #eafbfe; border-radius: 4px;}
.uc-slider .container .current{height: 24px; overflow: hidden; width: 100%; background-color: #eafbfe; border-radius: 4px; white-space: nowrap;}
.uc-slider .current .unit{display: inline-block; margin-left: 0; height: 24px;}
.uc-slider .unit div{border-right: solid 1px #d0eaf9; height: 24px; padding-right: 10px; text-align: right;}
.uc-slider .unit span{float: right; display: inline; height: 24px; line-height: 2; font-size: 12px; color: #c8c1a8; -webkit-transition: color .3s; -moz-transition: color .3s; -ms-transition: color .3s; -o-transition: color .3s;}
.uc-slider .unit i{float: right; display: none; height: 8px; width: 13px; overflow: hidden; margin-top: 7px;}
.uc-slider .unit .last{border-width: 0; padding-right: 11px;}
.uc-slider .bar{position: absolute; top: 0; left: -7px; background-color: #f00; height: 26px; overflow: hidden; width: 100%; cursor: default; opacity: 0; filter: alpha(opacity=0);}
.uc-slider .drag{position: absolute; left: -7px; top: -2px; display: block; width: 10px; height: 19px; padding: 9px 0 0 3px; overflow: hidden; border: solid 1px #bbbbbb; background-color: #fff; cursor: default;
-webkit-transition: border-color .3s, -webkit-transform .3s; -moz-transition: border-color .3s, -moz-transform .3s; -ms-transition: border-color .3s, -ms-transform .3s; -o-transition: border-color .3s, -o-transform .3s; outline: none; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1);}
.uc-slider .drag:link,
.uc-slider .drag:visited{border-color: #ccc;}
.uc-slider .drag:hover{border-color: #aaa;}
.uc-slider .drag i{float: left; display: inline; margin: 0 0 0 1px; width: 1px; height: 10px; overflow: hidden; background: #ababab; background: -webkit-linear-gradient(top, #f2f2f2, #ababab, #f2f2f2); background: -moz-linear-gradient(top, #f2f2f2, #ababab, #f2f2f2); background: -o-linear-gradient(top, #f2f2f2, #ababab, #f2f2f2); background: -ms-linear-gradient(top, #f2f2f2, #ababab, #f2f2f2);}
/*.slider iframe{position: absolute; top: 0; left: 0; filter:alpha(opacity=0); width: 100%; height: 26px; background-color: #f00; border-width: 0;}*/
.uc-slider .w60{width: 60%; *width: 59.99%;}
.uc-slider .w50{width: 50%; *width: 49.99%;}
.uc-slider .w25{width: 25%; *width: 24.99%;}
.uc-slider .w20{width: 20%; *width: 19.99%;}
.duration{width: 506px;}
.uc-slider .mm{width: 37px;}
.uc-slider .yy{width: 57px;}
.uc-input{border: solid 1px #d4d4d4; width: 44px; height: 12px; padding: 6px 4px; font-size: 12px; line-height: 1; outline: none; border-radius: 4px; box-shadow: inset 1px 1px 1px #e8e8e8; color: #000;}
</style>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
var UC = {};
(function($, win, doc, U){
U.slider = function(selection, options){
var _t = this;
_t.sliderDom = $(selection);
_t.rangeDom = _t.sliderDom.find('.range');
_t.containerDom = _t.sliderDom.find('.container');
_t.dragDom = _t.sliderDom.find('.drag');
_t.barDom = _t.sliderDom.find('.bar');
_t.blockDom = _t.sliderDom.find('.block');
_t.unitDom = _t.sliderDom.find('.unit');
_t.inputDom = null;
_t.options = options;
_t.ismousedown = false;
_t.diffX = 0;
_t.distanceX = 0;
_t.start = 0;
_t.minWidth = 0;
_t.maxWidth = 0;
_t.minValue = 0;
_t.maxValue = 0;
_t.currentWidth = 0;
_t.currentIndex = 0;
_t.currentValue = 0;
_t.blockWidth = [];
_t.block = _t.options.data;
_t.hasInput = false;
_t.changeHandler = function(){};
_t.initUnit = function(){
var w, min, max;
for(var i = 0, len = _t.blockDom.length; i < len; i++){
w = $(_t.blockDom[i]).width();
$(_t.unitDom[i]).width(w);
_t.blockWidth.push(w);
_t.maxWidth += w;
}
_t.barDom.width(_t.maxWidth + 14);
//if(_t.block[0].min !== _t.currentValue){
//_t.currentValue = _t.block[0].min;
//}
/* 初始化允许选择的最小最大值 */
_t.currentValue = _t.minValue = !!_t.options.min ? _t.options.min : _t.block[0].min;
_t.maxValue = !!_t.options.max ? _t.options.max : _t.block[len - 1].max;
};
_t.initInput = function(){
var input;
if(!!_t.options.bindInput){
_t.hasInput = true;
_t.inputDom = $(_t.options.bindInput);
}
};
_t.initValue = function(){
var idx = 0, value = 0;
if(!!_t.options.defaultValue){
_t.currentValue = _t.options.defaultValue - 0;
}
_t.valueToWidth();
_t.moveToX();
};
_t.showValue = function(){
if(_t.hasInput){
_t.inputDom.val(_t.currentValue);
}
};
_t.changeInputValue = function(){
if(_t.hasInput){
function handler(){
var t = $(this), val = t.val(), reg = /^\d+$/, max, min, unit, idx;
min = _t.block[0].min;
max = _t.block[_t.block.length - 1].max;
if(reg.test(val)){
idx = _t.valueToIndex(val);
unit = _t.block[idx].unit;
val = val - 0 < min ? min : (val - 0 > max ? max : val);
val = Math.ceil(val / unit) * unit;
}else{
//val = min;
val = _t.options.defaultValue !== undefined ? _t.options.defaultValue : min;
}
_t.currentValue = val - 0;
_t.valueToWidth();
//_t.widthToValue();
//_t.valueToWidth();
_t.moveToX();
t.val(_t.currentValue);
}
_t.inputDom.blur(handler);
_t.inputDom.change(handler);
}
}
_t.showUnit = function(){
_t.unitDom.find('span').css('color', '#93c4e2');
_t.unitDom.find('i').css('display', 'none');
$(_t.unitDom[_t.currentIndex]).find('span').css('color', '#000');
$(_t.unitDom[_t.currentIndex]).find('i').css('display', 'inline');
//_t.changeHandler();
}
_t.setMaxValue = function(val){
_t.maxValue = val < _t.block[_t.block.length - 1].max ? val : _t.block[_t.block.length - 1].max;
if(_t.maxValue < _t.minValue){
_t.minValue = _t.maxValue;
}
return _t;
}
_t.setMinValue = function(val){
_t.minValue = val > _t.block[0].min ? val : _t.block[0].min;
return _t;
}
_t.change = function(fun){
_t.changeHandler = fun;
return _t;
}
_t.calculateVal = function(){
_t.widthToValue();
_t.showValue();
_t.showUnit();
//alert(1);
};
_t.moveToX = function(){
_t.showValue();
_t.showUnit();
_t.dragDom.stop().animate({
'left' : _t.currentWidth - 7
}, 200);
_t.containerDom.stop().animate({
'width' : _t.currentWidth
}, 200);
_t.changeHandler();
};
_t.valueToIndex = function(v){
var len = _t.block.length, idx = 0, i = 0, val;
val = !!v ? v : _t.currentValue;
//console.log(!!v? 'v' : 'currentValue');
for(; i < len; i++){
if(val <= _t.block[i].max){
idx = i;
break;
}
}
return idx;
};
_t.widthToValue = function(width){
var i = 0, w = 0, len = _t.blockWidth.length, unit, _w, _v;
_w = !!width ? width : _t.currentWidth;
for(; i < len; i++){
if(_w <= w + _t.blockWidth[i]){
break;
}
w += _t.blockWidth[i];
}
unit = _t.block[i];
_w = (_w - w) / _t.blockWidth[i];
//_v = (i < 1 ? _t.block[0].min : _t.block[i - 1].max) + Math.ceil(_w * ((unit.max - unit.min) / unit.unit)) * unit.unit;
_v = _t.block[i].min + Math.ceil(_w * ((unit.max - unit.min) / unit.unit)) * unit.unit;
/* 调整值 */
_t.currentValue = _v = _v < _t.minValue ? _t.minValue : (_v > _t.maxValue ? _t.maxValue : _v);
_t.currentValue = _v;
//_t.currentIndex = i;
_t.currentIndex = _t.valueToIndex();
return _t.currentValue;
};
_t.valueToWidth = function(value){
var i = 0, w = 0, len, idx, unit, _v;
_v = !!value ? value : _t.currentValue;
/* 调整值 */
_t.currentValue = _v = _v < _t.minValue ? _t.minValue : (_v > _t.maxValue ? _t.maxValue : _v);
len = _t.block.length;
for(; i < len; i++){
if(_v <= _t.block[i].max){
idx = i;
break;
}
}
for(i = 0, len = idx; i < len; i++){
w += _t.blockWidth[i];
}
unit = _t.block[idx];
//w += Math.floor((_v - (idx < 1 ? 0 : _t.block[idx - 1].max)) / (unit.max - unit.min) * _t.blockWidth[idx]);
w += Math.floor((_v - _t.block[idx].min) / (unit.max - unit.min) * _t.blockWidth[idx]);
_t.currentWidth = w;
_t.currentIndex = idx;
return w;
};
_t.value = function(val){
_t.currentValue = val - 0;
_t.valueToWidth();
_t.moveToX();
return _t;
};
_t.barDom.click(function(ev){
var width;
//_t.barDom.focus();
//alert($(doc).scrollLeft());
_t.distanceX = _t.rangeDom.offset().left;
width = Math.floor(ev.clientX + $(doc).scrollLeft() - _t.distanceX);
_t.currentWidth = width < 0 ? 0 : (width > _t.maxWidth ? _t.maxWidth : width);
_t.widthToValue();
_t.valueToWidth();
_t.moveToX();
});
_t.dragDom.mousedown(function(ev){
ev.preventDefault();
//$(this).blur();
//_t.dragDom.focus();
_t.minWidth = 0;
_t.maxWidth;
_t.distanceX = _t.rangeDom.offset().left;
_t.diffX = ev.clientX + $(doc).scrollLeft() - _t.dragDom.offset().left;
_t.ismousedown = true;
});
$(doc).mouseup(function(ev){
if(_t.ismousedown){
_t.valueToWidth();
_t.moveToX();
_t.ismousedown = false;
}
});
$(doc).mousemove(function(ev){
var x;
if(!_t.ismousedown){
return;
}
x = ev.clientX + $(doc).scrollLeft() - _t.diffX - _t.distanceX;
x = x <= -7 ? -7 : (x > _t.maxWidth - 7 ? _t.maxWidth - 7 : x);
_t.currentWidth = x + 7 > _t.maxWith ? _t.maxWith : x + 7;
_t.containerDom.css('width', _t.currentWidth);
_t.dragDom.css('left', x);
setTimeout(_t.calculateVal, 1);
//_t.calculateVal();
});
/* 重置长度 */
//$(win).resize();
_t.initUnit();
_t.initInput();
//setTimeout(_t.initValue, 1);
_t.initValue();
_t.showValue();
_t.changeInputValue();
};
})(jQuery, window, document, UC);
</script>
</head>
<body>
<div class="row">
<label class="row-name">购买时长：</label>
<div class="column">
<span id="uc-duration" class="uc-slider duration">
<div class="range">
<span class="block mm">
<div>
<span>1</span>
</div>
</span><span class="block mm">
<div>
<span>2</span>
</div>
</span><span class="block mm">
<div>
<span>3</span>
</div>
</span><span class="block mm">
<div>
<span>4</span>
</div>
</span><span class="block mm">
<div>
<span>5</span>
</div>
</span><span class="block mm">
<div>
<span>6</span>
</div>
</span><span class="block mm">
<div>
<span>7</span>
</div>
</span><span class="block mm">
<div>
<span>8</span>
</div>
</span><span class="block mm">
<div>
<span>9</span>
</div>
</span><span class="block yy">
<div >
<span>1年</span>
</div>
</span><span class="block yy">
<div >
<span>2年</span>
</div>
</span><span class="block yy">
<div class="last" >
<span>3年</span>
</div>
</span>
<div class="container">
<div class="current">
<span class="unit">
<div>
<i></i><span>1</span>
</div>
</span><span class="unit">
<div>
<i></i><span>2</span>
</div>
</span><span class="unit">
<div>
<i></i><span>3</span>
</div>
</span><span class="unit">
<div>
<i></i><span>4</span>
</div>
</span><span class="unit">
<div>
<i></i><span>5</span>
</div>
</span><span class="unit">
<div>
<i></i><span>6</span>
</div>
</span><span class="unit">
<div>
<i></i><span>7</span>
</div>
</span><span class="unit">
<div>
<i></i><span>8</span>
</div>
</span><span class="unit">
<div>
<i></i><span>9</span>
</div>
</span><span class="unit">
<div >
<span>1年</span>
</div>
</span><span class="unit">
<div >
<span>2年</span>
</div>
</span><span class="unit">
<div class="last" >
<span>3年</span>
</div>
</span>
</div>
</div>
<div class="bar"></div>
<a href="javascript:;" target="_self" rel="nofollow" class="drag" hidefocus>
<i></i>
<i></i>
<i></i>
</a>
</div>
</span>
<input class="uc-duration" type="text" value="12" />
</div>
</div>
<!-- 购买时长 E -->
<script type="text/javascript">
var F = new Object;
F.DurationConfig = {};
F.DurationConfig.data = [];
var vm_duration_config = [{"max":9,"min":1,"step":1,"unit":"month"},{"max":3,"min":1,"step":1,"unit":"year"},{"max":15,"min":1,"step":1,"unit":"day"}];
(function(){
var i = 0, l = 0, _i = 0, _l = 0,
step = 0,
min = 0,
max = 0,
type;
for(i = 0, l = vm_duration_config.length; i < l; i ++){
type = vm_duration_config[i].unit;
for(_i = vm_duration_config[i].min - 0, _l = vm_duration_config[i].max - 0; _i <= _l; _i ++){
min = max;
max = _i;
max = type === 'year' ? max * 12 : max;
step = max - min;
F.DurationConfig.data.push({
'unit': step,
'min': min,
'max': max
});
}
}
F.DurationConfig.defaultValue = 12;
})();
var t = new UC.slider("#uc-duration",{
data: F.DurationConfig.data,
min: 1,
bindInput: '.uc-duration'
})
t.change(function () {
alert(this.currentValue);
});
</script>
</body>
</html>