以特定值顯示元素的滑塊

我想要一個類似於this之一的jQuery /任何滑塊，但功能稍多一些。以特定值顯示元素的滑塊

我將在我的HTML代碼中包含元素，圖像，文本和一些div，默認情況下應該隱藏這些元素，但是當滑塊達到特定值時，圖像/文本/任何內容應該連續顯示。

因此，在值爲0的情況下，例如，只顯示一個圖像，然後在值1時彈出另一個圖像，依此類推。

是否有任何預製的jQuery插件，或者我會怎麼做呢？

<!DOCTYPE html> 
<html> 

    <head> 
     <title>jQuery Mobile Tutorial on Codeforest.net</title> 
     <link rel="stylesheet" 
     href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css"> 
     <style> 
      #slider { 
       margin: 10px; 
      } 
     </style> 
     <script src="http://code.jquery.com/jquery-1.9.0.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> 
     <script> 
      var img1 = $('<img\>').attr('src', 'http://lorempixel.com/400/200/'); 
      var img2 = $('<img\>').attr('src', 'http://lorempixel.com/300/200/'); 
      var foto = $('#foto'); 

      foto.html(img1); 

      $("#slider").slider({ 
       slide: function(event, ui) { 
        if (ui.value > 50) { 
         $('#foto').html(img2); 
        } else { 
         $('#foto').html(img1); 
        } 
       } 
      }); 
     </script> 
    </head> 

    <body> 
     <div id="slider"></div> 
     <div id="foto"></div> 
    </body> 

</html>

來源

2013-01-22 cherrun

jQueryUI滑塊具有內置函數，可以在滑動時獲取該值。所以你可以隨時獲得滑塊的價值。

$("#slider").slider({ 
    slide: function(event, ui) { 
     console.log(ui.value); 
    } 
});

在特定點上追加特定圖像應該不難。你也可以取消隱藏你的div，或者你想要的任何東西。我已經在JSFiddle上爲您構建了一個示例。

http://jsfiddle.net/AVBWr/

編輯：確保你把它包裝的document.ready函數裏面，像這樣：

$(document).ready(function() { 
    var img1 = $('<img\>').attr('src', 'http://lorempixel.com/400/200/'); 
    var img2 = $('<img\>').attr('src', 'http://lorempixel.com/300/200/'); 
    var foto = $('#foto'); 

    foto.html(img1); 

    $("#slider").slider({ 
     slide: function(event, ui) { 
      if (ui.value > 50) { 
       $('#foto').html(img2); 
      } else { 
       $('#foto').html(img1); 
      } 
     } 
    }); 
});

來源

2013-01-22 10:29:39 Dieterg

我試圖用你的榜樣（請參閱我的MWE），但我沒有按」什麼都不顯示。我做錯了什麼？ – cherrun

確保您將其包裝在document.ready函數中或將其加載到頁面的底部。 – Dieterg

以特定值顯示元素的滑塊

回答

相關問題