借助easyUI制作、完善slider小滑块。
可拖动、和在右边输入框精确输入
效果图:
亮度设置:
logo-1 fl"
Box"
Box clearfix"
Box1"
%
@H_502_115@
JS代码:
方法封装
function defaultValue = 80; sliderLength = 130; 'h'*sliderLength/100);
function defaultValue = 80; sliderLength = 130; 'h'*sliderLength/100);
$(s2).width(defaultValue</span>*sliderLength/100);
<span style="color: #000000;"> $(s3).empty().val(defaultValue);
$(s3).on(</span>'keyup',<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #0000ff;">var</span> val = $(<span style="color: #0000ff;">this</span><span style="color: #000000;">).val();
</span><span style="color: #0000ff;">if</span>(val==''||val==<span style="color: #0000ff;">null</span>||val==undefined||<span style="color: #000000;">isNaN(val)){
val</span>=0<span style="color: #000000;">;
}
</span><span style="color: #0000ff;">var</span> num =<span style="color: #000000;"> parseInt(val);
</span><span style="color: #0000ff;">if</span>(num>100<span style="color: #000000;">){
num</span>=100<span style="color: #000000;">;
}
$(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">).empty().val(num);
</span><span style="color: #0000ff;">var</span> width = num*sliderLength/100;
$(s1).slider('setValue'<span style="color: #000000;">,num);
$(s2).css(</span>'width'<span style="color: #000000;">,width);
});
}
/*亮度滑块*/
sliderfun(".ssa","#ssa_add","#liangdu");
到这里,一个精美的滑块就制作出来了~~~~
原文链接:https://www.f2er.com/jquery/403443.html