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>