基于jquery實(shí)現(xiàn)鼠標(biāo)左右拖動滑塊滑動附源碼下載

更新時間：2015年12月23日 14:54:07 投稿：mrr

這篇文章主要介紹了基于jquery實(shí)現(xiàn)鼠標(biāo)左右拖動滑塊滑動附源碼下載的相關(guān)資料,需要的朋友可以參考下

在沒步入正文之前，先給大家貼效果圖，看看是不是您想要的效果：

基于jQuery移動端滑塊拖動設(shè)置代碼。這是一款支持手機(jī)移動端的特效，可拖動滑塊范圍選擇器，拖動滑塊數(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);
     });
   });

您可能感興趣的文章:

相關(guān)文章

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