jQuery Domino Like Slider Plugin

Question

Tôi đang tìm một plugin trượt nội dung dựa trên jQuery. Tôi không có nghĩa là một trong những như this (trong đó có quá nhiều) cũng không phải là jQueryUI slider. Những gì tôi đang tìm kiếm tốt nhất có thể được mô tả trong một bức tranh.

Có plugin jQuery nào cho phép tôi trượt (hoặc chuyển đổi) các phần tử nhất định khỏi khung nhìn và trượt các phần tử mới vào vị trí của nó không? Lý tưởng nhất, tôi muốn có thể giảm bớt một số yếu tố và quay trở lại trang trong (loại a) loạt, thay vì cái khác. Khả năng giảm bớt những yếu tố này, thay vì trượt chúng bằng một tốc độ tuyến tính, sẽ rất tuyệt vời.

hình ảnh này là hình ảnh tốt nhất mà tôi có thể đưa ra:

Tôi biết tôi có thể phát triển một plugin, như tôi đã làm nhiều trước đó, nhưng tôi muốn tránh reinventing the wheel, nếu có thể. Bất cứ ai có thể đề xuất một plugin?

Cảm ơn bạn đã dành thời gian.

Answer 1

Nếu bạn đang hỗ trợ CSS3, bạn có thể thử làm một cái gì đó như thế này, có thể tốt hơn để xây dựng một lớp hoạt hình.

.item:nth-child(1) 
{ 
transition-timing-function   : ease-in-out;  
transition-property     : left; 
transition-duration     : 0.1s; 
transition-delay     : 0.35s; 
} 

item:nth-child(2) 
{ 
transition-timing-function   : ease-in-out;  
transition-property     : left; 
transition-duration     : 0.1s; 
transition-delay     : 0.55s; 
} 

.item:nth-child(3) 
{ 
transition-timing-function   : ease-in-out;  
transition-property     : left; 
transition-duration     : 0.1s; 
transition-delay     : 0.65s; 
} 

.item:nth-child(4) 
{ 
transition-timing-function   : ease-in-out;  
transition-property     : left; 
transition-duration     : 0.1s; 
transition-delay     : 0.75s; 
}​ 

Nếu bạn muốn sử dụng jQuery, tôi đã có một số thành công với http://api.jquery.com/queue/ cho phép bạn tạo một hoạt ảnh phức tạp hơn. Đối với một số lượng không xác định của trẻ em, bạn có thể sử dụng phương pháp slice().

Tôi đã thay đổi đoạn mã này tự thực hiện được tìm thấy trên http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/

(function hidenext(jq){ 
jq.eq(0).fadeOut("fast", function(){ 
    (jq=jq.slice(1)).length && hidenext(jq); 
}); 
})($('div')) 

Bạn không cần phải sử dụng fadeOut và nó không cần phải tự thực hiện, nhưng nó gọn gàng và ngăn nắp cách áp dụng 'chuyển đổi' thành một số yếu tố không xác định.

Dưới đây là một fiddle sử dụng fadeOut http://jsfiddle.net/NpBfJ/ ... Đây là công việc có lẽ nhiều hơn bạn muốn ... :-)

Liên quan đến thanh trượt, đây là một trong những người Việt tốt nhất hiện có http://caroufredsel.dev7studios.com/ nó có nhiều các tính năng tùy chỉnh.