帶滑動圖片的動態jQuery菜單

我需要製作一個用於展示產品的動態jQuery菜單。帶滑動圖片的動態jQuery菜單

將有一個帶有文本和超鏈接的主圖片，佔60％的屏幕，在它的右邊我需要三個小圖片（一個在另一個上面，水平），20％寬度的屏幕但所有的主體一樣高）。

我需要動畫的幫助。動畫將是下一個：右邊的三張圖片向上滑動，最上面的圖片消失，並且一個新的圖片被添加到底部（與最頂部的消失同時）。現在，消失的那個成爲主要的一個。

我已經用.slideUp函數做出了一個簡單的解決方案，但是並沒有真正地讓div上升，而是直到它變得不可見爲止它正在失去它的高度。這不是我想要的解決方案。

謝謝。

編輯：

我設法與jQuery.sliedUp功能一些解決，但我仍然沒有得到客戶端被要求的效果。

現在多了一些搜索，我發現jQuery UI隱藏函數擴展可以達到我期待的效果。

下面是一個例子：如果你點擊頂部DIV，而它向上滑動，底部DIV不跟進，並取代其位置http://jsfiddle.net/WMPRJ/

我現在的問題是。我需要這樣做。請給我一個解決方案。

來源

2012-07-30 Gorgi Rankovski

如果您可以在jsfiddle.net中創建示例演示，人們會更好地理解您的需求。 – afrin216 2012-07-30 08:26:22

追加當前的主要縮略圖的底部，向上滑動頂部的一個和remove()它。取其src屬性並將其設置爲主圖像。

這裏有一些（對不起，不是一個獨立的例子）代碼，應該讓你去哪裏。如果你真的花時間閱讀它，你會發現它確實是我在前兩句中描述的。

$('.thumb').first().slideUp(function(){ 
    $('#main').attr('src', $(this).attr('src')); 
    $(this).remove(); 
});

來源

2012-07-30 07:59:05 bdares

嗨。我不認爲你已經理解我的問題。我需要一個將四個縮略圖向上滑動的解決方案，最上面的一個不在屏幕上，最下面的一個在屏幕上顯示。我需要一個包含HTML和CSS的工作示例。謝謝。 – 2012-07-30 08:04:32

如果一門功課，請追加功課標籤。

我無法爲您提供完整的HTML和JavaScript，而是一個想法。你有兩個街區。漂浮右塊;

Left Block - 60%. 
Right Block - 20% (float:right)

定義右鍵&左塊高度和給overflow:hidden爲右擋。現在定義一個像這樣的點擊功能。

var nextAnimateImageId = 1; 
$("#my_button").click(function{ 

jQuery("#my_image"+animateImageId).animate({height:'toggle'}); 
nextAnimateImageId = nextAnimateImageId + 1; 

});

我的想法是，如果你有5個圖像，只有3個將被顯示，因爲定義的高度和溢出：隱藏屬性。當您將第一張圖像設置爲height = 0（這是切換的操作）時，第四張圖像會由於空間釋放而出現，爲您提供了一個不錯的向上滾動動畫。

來源

2012-07-30 08:25:08 afrin216

這不是一項功課。我編輯了這個問題，現在有一個鏈接到jsfiddle。請看看它。謝謝。 – 2012-08-02 06:51:22

帶滑動圖片的動態jQuery菜單

回答

相關問題