在jQuery中做水平滾動窗格的最佳方法？

我想出了下面的解決方案。它工作的很好，但我很想知道是否有更高效的方法。謝謝！在jQuery中做水平滾動窗格的最佳方法？

HTML：

<div id="magic-pane" style="width: 300px; height: 400px; background: #eee; overflow: hidden"> 
    <div id="scroller" style="width: 600px; height: 100%; left: 0px; position: relative"> 
     <div id="pane1" style="width: 300px; height: 100%; background: #efe; float: left"> 
      <span id="pane1-clicker">Whee, click me!</span> 
     </div> 
     <div id="pane2" style="width: 300px; height: 100%; background: #fee; float: left"> 
      <span id="pane2-clicker">Whoosh! Click me!</span> 
     </div> 
    </div> 
</div>

腳本：

$(document).ready(function() { 
    $('#pane1-clicker').click(function() { 
     $('#scroller').animate({ left: '-300px' }, 500); 
    }); 
    $('#pane2-clicker').click(function() { 
     $('#scroller').animate({ left: '0' }, 500); 
    }); 
});

所以基本上，神奇窗格是一個小視這爲300px寬。它內部是一個寬度爲兩倍的卷軸，並且包含兩個並排的div。非常簡單，但是，只是想知道是否有更高效的編碼方式。

Demo

來源

2011-04-18 CaptSaltyJack

我覺得'滑動'比'滾動'更合適。 http://demos.flesler.com/jquery/scrollTo/ – 2011-04-18 05:38:55

它的完美....你可以用'externel CSS'而不是'inline CSS'來優化它。 – diEcho 2011-04-18 05:41:34

當數量最少，你不需要擔心什麼。就像你的情況一樣，2是非常易於管理的。注意：您正在爲所有窗格單獨編寫onClick函數，這會產生問題。

但隨着數量的增長，可以說50，那麼你將不得不編寫不同的onClick函數$('#pane1-clicker') .... $("#pane50-clicker)，這是非常低效。您應該修改您的腳本，以支持任意數量的窗格，而無需編寫額外的代碼。

此外，擴展功能，以便它可以用作插件。
它會更好，如果該插件可以匹配特定的選擇和分配像left:300px

來源

2011-04-18 05:36:13 Starx

相關的位置從當前的代碼，我可能會改變了蝙蝠的唯一一件事就是取出$('#scroller')從兩個click處理程序進入關閉。這樣，處理程序就不必每次點擊就選擇它。

var $scroller = $('#scroller'); 
$('#pane1-clicker').click(function() { 
    $scroller.animate({ left: '-300px' }, 500); 
}); 
$('#pane2-clicker').click(function() { 
    $scroller.animate({ left: '0' }, 500); 
});

來源

2011-04-18 05:59:20

在jQuery中做水平滾動窗格的最佳方法？

回答

相關問題