jQuery的UI滑塊移動多個div

嘿，我想使用jQuery UI的我的網頁上有一個滑塊，移動多個div不同的距離。jQuery的UI滑塊移動多個div

所以基本上你拉動滑塊，div1左移10px，div2左移20px。

我已經看了看這裏的jQuery UI滑塊http://jqueryui.com/demos/slider/#side-scroll，但我無法弄清楚如何讓滑塊移動多個div。

幫助將非常感激。我對jQuery相當陌生，但我很享受學習體驗=]

來源

2010-08-26 salmon

您可以使用.slide（）事件，否？ http://jqueryui.com/demos/slider/#event-slide

這樣你就可以調整你想要的div。我會寫一個小例子

做了一個小例子： http://labs.joggink.be/slider-multiple-divs/

滑塊調整大小的div 3這樣的（這是非常基本的和醜陋的書面）：

 $("#slider").slider(
      { 
         value:100, 
         min: 10, 
         max: 250, 
         step: 10, 
         slide: function(event, ui) { 
          $('#div-1').css({ 
           width : ui.value + 'px', 
           height: ui.value + 'px' 
          }); 
          $('#div-2').css({ 
           width : ui.value + 10 + 'px', 
           height: ui.value + 10 + 'px' 
          }); 
          $('#div-3').css({ 
           width : ui.value + 20 + 'px', 
           height: ui.value + 20 + 'px' 
          }); 
         } 
      }); 
    });

來源

2010-08-26 09:00:41 joggink

感謝一大堆。不過我更喜歡帶調整大小的那個。目前我有兩個div被滑塊移動，但我需要一個以不同的速度移動。舉個例子，非常感謝！ – salmon 2010-08-26 09:21:00

因此，使用上面的代碼，但改變位置，而不是尺寸 - 完成工作。 – belugabob 2010-08-26 09:24:58

非常感謝這個例子=]好吧，這裏是我到目前爲止的一個鏈接，我無法設法讓底部框以不同的速度滾動到頂部框。 http://www.ehbeat.com/test2/slider.html 理想情況下，當您從左向右拖動滑塊時，我希望頂部和底部框以不同的速度移動，以便當滑塊到達正確的方塊表示20和10排成一列。非常感謝您的幫助，並對不起，如果我有點混亂。 – salmon 2010-08-26 09:40:54

jQuery的UI滑塊移動多個div

回答

相關問題