jquery实现鼠标拖拽滑动效果来选择数字的方法

2024-05-06 16:19:17

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了jquery实现鼠标拖拽滑动效果来选择数字的方法,涉及jQuery鼠标事件的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8">

<title>demo</title>

<link rel="stylesheet" href="css/jquery-ui.css">

<style>

.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}

</style>

<script src="js/jquery-1.10.2.js"></script>

<script src="js/jquery-ui.js"></script>

</head>

<body>

<div class="slider-box">

<div class="item">

<div class="tag">骑行里程：</div>

<div class="slider">

<div id="budget"></div>

</div>

<div class="val"><input value="8800" name="budget" /></div>

</div>

<div class="clr"></div>

<div class="item">

<div class="tag">骑行天数：</div>

<div class="slider">

<div id="days"></div>

</div>

<div class="val"><input value="9" name="days" /></div>

</div>

<div class="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>