基于jquery實現(xiàn)鼠標(biāo)左右拖動滑塊滑動附源碼下載
更新時間：2015年12月23日 14:54:07 投稿：mrr
這篇文章主要介紹了基于jquery實現(xiàn)鼠標(biāo)左右拖動滑塊滑動附源碼下載 的相關(guān)資料,需要的朋友可以參考下
在沒步入正文之前，先給大家貼效果圖，看看是不是您想要的效果：
基于jQuery移動端滑塊拖動設(shè)置代碼。這是一款支持手機移動端的特效，可拖動滑塊范圍選擇器，拖動滑塊數(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)拖動效果代碼
- jquery實現(xiàn)鼠標(biāo)拖動圖片效果示例代碼
- Jquery寫一個鼠標(biāo)拖動效果實現(xiàn)原理與代碼
- jquery實現(xiàn)的鼠標(biāo)拖動排序Li或Table
- jQuery實現(xiàn)鼠標(biāo)可拖動調(diào)整表格列寬度
- jquery div拖動效果示例代碼
- jquery簡單的拖動效果實現(xiàn)原理及示例
- jQuery實現(xiàn)簡單的DIV拖動效果
- jQuery實現(xiàn)單擊彈出Div層窗口效果(可關(guān)閉可拖動)
- jQuery實現(xiàn)的鼠標(biāo)拖動浮層功能示例【拖動div等任何標(biāo)簽】
相關(guān)文章
首先廢話一句，jQuery選擇器真心很強大！接下來詳細介紹jQuery 選擇器項目實例實現(xiàn)方式2012-12-12
有時我們需要動態(tài)的展示訪問次數(shù)、下載次數(shù)等效果，我們可以借助jQuery結(jié)合后臺php實現(xiàn)一個滾動的數(shù)字展示效果。2015-08-08
jQuery實現(xiàn)圣誕節(jié)禮物傳送（花式輪播）
本文主要對jQuery實現(xiàn)圣誕節(jié)禮物傳送的方法、思路進行詳細介紹，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
基于jquery實現(xiàn)鼠標(biāo)左右拖動滑塊滑動附源碼下載
這篇文章主要介紹了基于jquery實現(xiàn)鼠標(biāo)左右拖動滑塊滑動附源碼下載 的相關(guān)資料,需要的朋友可以參考下2015-12-12
jQuery中clone()函數(shù)實現(xiàn)表單中增加和減少輸入項
這篇文章給大家介紹了jQuery中clone()函數(shù)實現(xiàn)表單中增加和減少輸入項的實例代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-05-05
這篇文章主要介紹了jQuery中:password選擇器用法,實例分析了:password選擇器的功能、定義與匹配密碼框的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
Jquery 選中表格一列并對表格排序?qū)崿F(xiàn)原理
該實現(xiàn)的主要思想是：獲取鼠標(biāo)點擊的表頭單元格的列號，遍歷數(shù)據(jù)行，獲取每個<tr>中的html，同時獲取每個<tr>標(biāo)簽下對應(yīng)獲取到的列號的<td>標(biāo)簽中的內(nèi)容，并取得<th>標(biāo)簽的type屬性值，需要的朋友可以了解下2012-12-12
這篇文章主要介紹了2014年50個程序員最適用的免費JQuery插件,需要的朋友可以參考下2014-12-12
本文對jQuery的Cookie插件的使用方法和具體實例進行系統(tǒng)介紹,有需要的朋友可以看下2016-11-11
jQuery不間斷滾動效果(模擬百度新聞支持文字/圖片/垂直滾動)
jQuery模擬百度新聞不間斷滾動效果并且支持文字、圖片水平垂直滾動等等，感興趣的朋友可以了解下，或許本文所提供的案例對你學(xué)習(xí)jquery特效有所幫助,好了話不多說，切入正題2013-02-02