jquery实现鼠标拖拽滑动效果来选择数字的方法
本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法。分享给大家供大家参考。具体如下：
这是使用jqueryui实现的一个精美实用的效果，可以通过鼠标拖拽滑动效果来选择数字
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metacharset="utf-8">
<title>demo</title>
<linkrel="stylesheet"href="css/jquery-ui.css">
<style>
.slider-box{background:#F0EFEB;
font-family:MicrosoftYahei;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.sliderdiv{
background:#8FBF0B;border:none;
height:0.5em;margin-top:0.5em
}
.slider-box.item.sliderdiv.ui-slider-handle{
background:#F4F3F1;width:1em;
height:1em;border-radius:1em
}
.slider-box.item.valinput{
border:none;border-bottom:1pxsolid#ABADA8;
background:none;padding:0.1em1em;
color:#E4531C;font-weight:bold;
font-size:1em;width:5em;text-align:center
}
.clr{clear:both}
</style>
<scriptsrc="js/jquery-1.10.2.js"></script>
<scriptsrc="js/jquery-ui.js"></script>
</head>
<body>
<divclass="slider-box">
<divclass="item">
<divclass="tag">骑行里程：</div>
<divclass="slider">
<divid="budget"></div>
</div>
<divclass="val"><inputvalue="8800"name="budget"/></div>
</div>
<divclass="clr"></div>
<divclass="item">
<divclass="tag">骑行天数：</div>
<divclass="slider">
<divid="days"></div>
</div>
<divclass="val"><inputvalue="9"name="days"/></div>
</div>
<divclass="clr"></div>
</div>
<script>
$("#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)
}
});
</script>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。