JQuery內容滑塊 - 最佳實踐？

我想創建一個網站，基本上是一個巨大的內容滑塊，在頁面加載時，您會看到div 1（基本上是整個屏幕），然後您可以單擊向下箭頭轉到第2頁等，當您到達頁面2我也希望能夠左右移動（僅在第2頁），將其視爲圖像滑塊，但使用div ..JQuery內容滑塊 - 最佳實踐？

我知道有插件可用，但我很喜歡寫它自己，我已經寫了一些（基本的）JQuery，它可以工作，但它看起來太臃腫了，我想要一個更好/更有效的方式來做到這一點..我所追求的是如何最好的方式來處理這個問題，我沒有看對於代碼，因爲我想學習並且變得更好，但不能想到解決這個問題的最佳方法，是否可以使用某種switch語句？你會怎麼做呢？

我還需要確保你不能滾過div的數目，我目前對if語句使用了var，但是覺得必須有一種方法將每個人都組合成一個簡單的函數？

JS以下，還有一個JSFiddle

謝謝！

http://jsfiddle.net/W4SVz/

$(function() { 
    var box = $('.box'); 
    TriggerClick = 0; 

    $("#down").click(function(){ 
    var height = $('.box').outerHeight(); 

    if(TriggerClick == 0){ 
     TriggerClick = 1; 
     $(box).stop().animate({top:'-='+height}, 500); 
    }else if(TriggerClick == 1){ 
     TriggerClick = 2; 
     $(box).stop().animate({top:'-='+height}, 500); 
    } 
    }); 

    $("#up").click(function(){ 
    var height = $('.box').outerHeight(); 

    if(TriggerClick == 2){ 
     TriggerClick = 1; 
     $(box).stop().animate({top:'+='+height}, 500); 
    }else if(TriggerClick == 1){ 
     TriggerClick = 0; 
     $(box).stop().animate({top:'+='+height}, 500); 
    } 
    }); 

    $("#left").click(function(){ 
    var height = $('.box').outerHeight(); 
    if(TriggerClick == 1){ 
     $(box).stop().animate({left:'-='+height}, 500); 
    } 
    }); 

    $("#right").click(function(){ 
    var height = $('.box').outerHeight(); 
    if(TriggerClick == 1){ 
     $(box).stop().animate({left:'+='+height}, 500); 
    } 
    }); 

});

來源

2013-04-10 woolm110

不錯，你嘗試使它自己:)看看[這個頁面]（http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/）有一些很好的模板編寫插件/小部件。它可能會幫助您在項目中獲得更多結構。 – Brainfeeder 2013-04-10 14:16:08

試着看看[Ascensor]（http://kirkas.ch/ascensor/），它看起來工作得很好。祝你滑梯好運！ – PHearst 2013-04-11 19:52:06

作爲一個聲明，它不會是一個好主意，自己做一個真正的使用。您可能在不同的瀏覽器上遇到很多兼容性問題。

但是，爲了學習目的，我很高興與你分享我的小知識。

我經常使用Kelvin Luck的jquery插件jscrollpane。這是一個輕巧且可配置的插件。在我看來，這對你來說也是一件有趣的事情。你可以在這裏找到代碼：http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js

這裏有一個非常簡單的使用這個插件。您可能也想看看 http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html

據我所知，它使jQuery事件系統的強大用法。隨時瞭解它......也許改善它;-)

玩得開心！

來源

2013-04-11 21:23:06 Cyril

在代碼方面，我會說，試圖找出所有四種情況共同點（上下左），並將其抽象出來。我不認爲TriggerClick變量非常直觀 - 不確定它是否需要。

使用插件模式將您的函數添加到jQuery（請參閱Brainfeeders鏈接），然後在頁面加載中使用該函數。

我玩過這個想法，但我不會發布我的代碼 - 如果你有興趣看到它，就大叫。

來源

2013-04-19 16:32:36

JQuery內容滑塊 - 最佳實踐？

回答

相關問題