圖片滑塊效果！在彼此頂部滾動

快速的問題是否任何人知道任何想法我將如何去創造這種效果，其中的圖像滑過每個頂部..只需要一些指針，開始我沒有真正有線索在哪裏開始..圖片滑塊效果！在彼此頂部滾動

manged使用現在的位置abosolute和z指數堆棧我的圖片，但不能讓我的圖片滾動超過對方..：■任何建議傢伙

#lookbook img{ 
width: 100%; 
position: absolute; 
top: 0px; 
} 

img#image1 { 

z-index: 100; 
} 

    img#image2 { 

top: 0px; 
z-index: 20; 
    } 
    img#image3 { 

z-index: 30; 
    } 
    img#image4 { 

z-index: 40; 
} 
    img#image5 { 

z-index: 50; 
} 
img#image6 { 

z-index: 60; 
} 
img#image7 { 

z-index: 70; 
    } 
    img#image8 { 

z-index: 80; 
    } 
    img#image9 { 

z-index: 90; 
    }

傑福需要一些JavaScript在這裏，使圖像修復時，它到達了頂部的任何幫助球員

manged得到這一點，但似乎沒有任何工作幫助任何一個笑

$(document).ready(function() { 
    $(window).scroll(function() { 
     if ($(window).scrollTop() > $('#lookbook img').offset().top) 
     $('#lookbook img').addClass('fixed'); 
     else 
     $('#lookbook img').removeClass('fixed'); 
     }); 

    });

來源

2013-05-14 AC88

玩z-index。 – melancia 2013-05-14 13:39:48

從頭開始。像[here]（http://teamtreehouse.com/），[here]（http://www.codecademy.com/#!/exercises/0）和[here]（https：//developer.mozilla）。組織/ EN-US /文檔/網頁/ HTML）。 – 2013-05-14 13:40:51

也許這個答案可以讓你開始：http://stackoverflow.com/questions/6488390/can-you-layer-pictures-on-top-of-each-other-on-a-webpage – Yeronimo 2013-05-14 13:46:23

根據您想如何滑動圖像（垂直或水平），您可以通過查看啓動this和this。這兩個鏈接將幫助您移動圖片。然後，您可以指定通過使用z-index玩弄什麼，通過參考here

來源

2013-05-14 13:45:57

感謝您的答覆yep知道它有什麼關係z =索引認爲我需要一個jQuery的聲明，如果圖像滾動到頂部修復，然後整理z索引.. – AC88 2013-05-14 14:03:29

manged使用絕對位置和z索引堆疊我的圖像頂部，但似乎不能讓他們滾動頂部滾動對方。。我更新我的問題 – AC88 2013-05-14 14:26:04

圖片滑塊效果！在彼此頂部滾動

回答

相關問題