Thanh trượt nội dung JQuery - thực hành tốt nhất?

Question

Tôi muốn tạo trang web về cơ bản là thanh trượt nội dung khổng lồ, khi tải trang, bạn sẽ thấy div 1 (chủ yếu là toàn bộ màn hình) và sau đó bạn có thể nhấp vào mũi tên xuống để chuyển đến trang 2, khi bạn truy cập trang 2 Tôi cũng muốn để có thể đi trái và phải (chỉ trên trang 2), hãy nghĩ về nó như một thanh trượt hình ảnh nhưng với divs ..

Tôi biết có các plugin có sẵn nhưng tôi khá ưa thích viết nó bản thân mình, tôi đã viết một số (cơ bản) JQuery mà không làm việc nhưng nó có vẻ quá cồng kềnh và tôi muốn có một cách tốt hơn/hiệu quả hơn làm nó .. những gì tôi sau là cách tốt nhất để tiếp cận này là, tôi không tìm kiếm cho mã như tôi muốn tìm hiểu và nhận được tốt hơn nhưng không thể nghĩ ra cách tốt nhất để giải quyết điều này, là nó có thể sử dụng một số loại báo cáo chuyển đổi? bạn sẽ làm thế nào? Tôi cũng cần một số cách khác nhau để đảm bảo rằng bạn không thể di chuyển qua số lượng div, tôi hiện đang sử dụng var với câu lệnh if nhưng cảm thấy phải có cách kết hợp mọi người vào một hàm đơn giản không? Không.

JS ở dưới và cũng có một JSFiddle

Cảm ơn!

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); 
    } 
    }); 

}); 

Answer 1

Như một sự từ bỏ, nó sẽ không phải là một ý tưởng tốt để làm một mình để sử dụng thực sự. Bạn có thể gặp phải nhiều sự cố tương thích trên trình duyệt khác.

Tuy nhiên với mục đích học tập, tôi rất sẵn lòng chia sẻ kiến ​​thức nhỏ của tôi với bạn.

Tôi thường sử dụng plugin jquroll jscrollpane từ Kelvin Luck. Đó là plugin nhẹ và có thể định cấu hình. Theo ý kiến ​​của tôi, nó cũng sẽ là một phần thú vị để bạn học tập. Bạn có thể tìm thấy mã ở đây: http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js

Đây là cách sử dụng rất đơn giản của plugin này. Bạn cũng có thể muốn có một cái nhìn rõ ràng http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html

Theo như tôi biết, nó sử dụng mạnh mẽ hệ thống sự kiện jquery. Hãy hiểu nó ... và có thể cải thiện nó ;-)

Hãy vui vẻ!

Answer 2

Về mặt mã, tôi sẽ cố gắng tìm ra điểm chung của cả bốn trường hợp (lên trên bên trái sang phải) và trừu tượng hóa. Tôi không nghĩ rằng biến TriggerClick là rất trực quan - không chắc chắn nó cần thiết.

Sử dụng mẫu plugin để thêm hàm của bạn vào jQuery (xem liên kết Brainfeeders), sau đó sử dụng chức năng đó trong tải trang.

Tôi đã chơi xung quanh với ý tưởng nhưng tôi sẽ không đăng mã - nếu bạn muốn xem.