本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法。分享给大家供大家参考。具体如下:
这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字
rush:js;">
<Meta charset="utf-8">
demo
.slider-Box{ background:#F0EFEB;
font-family:Microsoft Yahei; padding-bottom:10px
}
.slider-Box .item{ padding:10px}
.slider-Box .item .tag,.slider-Box .item .slider,.slider-Box .item .val{
float:left; margin-right:18px
}
.slider-Box .item .slider{ width:400px}
.slider-Box .item .slider div{
background:#8FBF0B; border:none;
height:0.5em; margin-top:0.5em
}
.slider-Box .item .slider div .ui-slider-handle{
background:#F4F3F1; width:1em;
height:1em; border-radius:1em
}
.slider-Box .item .val input{
border:none; border-bottom:1px solid #ABADA8;
background:none; padding:0.1em 1em;
color:#E4531C; font-weight:bold;
font-size:1em; width:5em; text-align:center
}
.clr{ clear:both}