h5页面拖拽选择数字到指定位置_jquery实现鼠标拖拽滑动效果来选择数字的方法...

本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法。分享给大家供大家参考。具体如下：

这是使用jquery ui实现的一个精美实用的效果，可以通过鼠标拖拽滑动效果来选择数字

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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}

骑行里程：

骑行天数：

$("#budget").slider({

min: 2000,

max: 17000,

step: 100,

value: $('input[name="budget"]').val(),

slide: function( event, ui ) {

$('input[name="budget"]').val(ui.value)

}

});

$("#days").slider({

min: 1,

max: 20,

value: $('input[name="days"]').val(),

slide: function( event, ui ) {

$('input[name="days"]').val(ui.value)

}

});

希望本文所述对大家的jQuery程序设计有所帮助。