下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。
内存溢出小编现在分享给大家，也给大家做个参考。
<!-- 购买时长 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.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); background: -o-linear-gradIEnt(top,#f2f2f2); background: -ms-linear-gradIEnt(top,#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,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,_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,len,IDx,_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 > <label >购买时长：</label> <div > <span ID="uc-duration" > <div > <span > <div> <span>1</span> </div> </span><span > <div> <span>2</span> </div> </span><span > <div> <span>3</span> </div> </span><span > <div> <span>4</span> </div> </span><span > <div> <span>5</span> </div> </span><span > <div> <span>6</span> </div> </span><span > <div> <span>7</span> </div> </span><span > <div> <span>8</span> </div> </span><span > <div> <span>9</span> </div> </span><span > <div > <span>1年</span> </div> </span><span > <div > <span>2年</span> </div> </span><span > <div > <span>3年</span> </div> </span> <div > <div > <span > <div> <i></i><span>1</span> </div> </span><span > <div> <i></i><span>2</span> </div> </span><span > <div> <i></i><span>3</span> </div> </span><span > <div> <i></i><span>4</span> </div> </span><span > <div> <i></i><span>5</span> </div> </span><span > <div> <i></i><span>6</span> </div> </span><span > <div> <i></i><span>7</span> </div> </span><span > <div> <i></i><span>8</span> </div> </span><span > <div> <i></i><span>9</span> </div> </span><span > <div > <span>1年</span> </div> </span><span > <div > <span>2年</span> </div> </span><span > <div > <span>3年</span> </div> </span> </div> </div> <div ></div> <a href="JavaScript:;" target="_self" rel="nofollow" hIDefocus> <i></i> <i></i> <i></i> </a> </div> </span> <input 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,"unit":"year"},{"max":15,"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> 以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
总结以上是内存溢出为你收集整理的阿里云购买时长滑动条全部内容，希望文章能够帮你解决阿里云购买时长滑动条所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）