基于jquery實(shí)現(xiàn)鼠標(biāo)左右拖動(dòng)滑塊滑動(dòng)附源碼下載
更新時(shí)間：2015年12月23日 14:54:07 投稿：mrr
這篇文章主要介紹了基于jquery實(shí)現(xiàn)鼠標(biāo)左右拖動(dòng)滑塊滑動(dòng)附源碼下載 的相關(guān)資料,需要的朋友可以參考下
在沒步入正文之前，先給大家貼效果圖，看看是不是您想要的效果：
基于jQuery移動(dòng)端滑塊拖動(dòng)設(shè)置代碼。這是一款支持手機(jī)移動(dòng)端的特效，可拖動(dòng)滑塊范圍選擇器，拖動(dòng)滑塊數(shù)值選擇器。
廢話不多說了，直接給大家貼代碼了。
html代碼：
<div class="demo">
<input type="hidden" class="single-slider" value="0" />
<!-- <button id="g1">獲取值</button> -->
</div>
<div class="demo">
<input class="range-slider" type="hidden" value="10,89" />
<!-- <button id="g2">獲取值</button> -->
</div>
js代碼：
$(function () {
$('.single-slider').jRange({
from: 0,
to: 100,
step: 1,
scale: [0, 25, 50, 75, 100],
format: '%s',
width: 300,
showLabels: true,
showScale: true
});
$('.range-slider').jRange({
from: 0,
to: 100,
step: 1,
scale: [0, 25, 50, 75, 100],
format: '%s',
width: 300,
showLabels: true,
isRange: true
});
$("#g1").click(function () {
var aa = $(".single-slider").val();
alert(aa);
});
$("#g2").click(function () {
var aa = $(".range-slider").val();
alert(aa);
});
});
您可能感興趣的文章:
- 基于jquery的鼠標(biāo)拖動(dòng)效果代碼
- jquery實(shí)現(xiàn)鼠標(biāo)拖動(dòng)圖片效果示例代碼
- Jquery寫一個(gè)鼠標(biāo)拖動(dòng)效果實(shí)現(xiàn)原理與代碼
- jquery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)排序Li或Table
- jQuery實(shí)現(xiàn)鼠標(biāo)可拖動(dòng)調(diào)整表格列寬度
- jquery div拖動(dòng)效果示例代碼
- jquery簡(jiǎn)單的拖動(dòng)效果實(shí)現(xiàn)原理及示例
- jQuery實(shí)現(xiàn)簡(jiǎn)單的DIV拖動(dòng)效果
- jQuery實(shí)現(xiàn)單擊彈出Div層窗口效果(可關(guān)閉可拖動(dòng))
- jQuery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)浮層功能示例【拖動(dòng)div等任何標(biāo)簽】
相關(guān)文章
本文給大家分享的是jQuery中的end()的定義和使用方法及示例，非常簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2015-07-07
jQuery動(dòng)畫出現(xiàn)連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的解決方法
這篇文章主要介紹了jQuery動(dòng)畫出現(xiàn)連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的解決方法,實(shí)例分析了針對(duì)jQuery中slideUp、slideDown、animate等動(dòng)畫運(yùn)用時(shí)出現(xiàn)的滯后反復(fù)執(zhí)行等問題的解決方法,需要的朋友可以參考下2015-01-01
jQuery EasyUI 獲取tabs的實(shí)例解析
左邊tree，右邊tabs。點(diǎn)擊tree增加相應(yīng)的tabs。下面通過一段代碼給大家解析，需要的朋友參考下吧2016-12-12
jquery+ashx無刷新GridView數(shù)據(jù)顯示插件(實(shí)現(xiàn)分頁(yè)、排序、過濾功能)
最近做一個(gè)AJAX的GridView來顯示數(shù)據(jù)，當(dāng)然按照現(xiàn)在流行的首選是Jquery。2010-04-04
這篇文章主要介紹了JQuery為頁(yè)面Dom元素綁定事件及解除綁定方法,需要的朋友可以參考下2014-04-04
獲得內(nèi)容的三個(gè)簡(jiǎn)單實(shí)用的方法text()、html() 以及 val()、獲取屬性的attr()方法，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-12-12
跟我一起學(xué)寫jQuery插件開發(fā)方法（附完整實(shí)例及下載）
jQuery如此流行，各式各樣的jQuery插件也是滿天飛。你有沒有想過把自己的一些常用的JS功能也寫成jQuery插件呢？如果你的答案是肯定的，那么來吧！和我一起學(xué)寫jQuery插件吧！2010-04-04
本文為大家介紹下jquery1.9 下如何檢測(cè)瀏覽器類型和版本，下面有個(gè)不錯(cuò)的示例，大家可以參考下2013-12-12
jQuery使用getJSON方法獲取json數(shù)據(jù)完整示例
這篇文章主要介紹了jQuery使用getJSON方法獲取json數(shù)據(jù),結(jié)合完整實(shí)例形式分析了getJSON方法讀取與遍歷json文件數(shù)據(jù)的相關(guān)技巧,需要的朋友可以參考下2016-09-09
這篇文章主要為大家介紹了jQuery的核心函數(shù)和事件處理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01