jQuery：向下滑動並以特殊方式替換另一個背景圖像

以下是代碼jsFiddle。jQuery：向下滑動並以特殊方式替換另一個背景圖像

有2個圖像：新（現代）和舊的。在我的例子中，當你按下「點擊這裏下滑」鏈接時（儘管我沒有拉伸圖像以使它們彼此適合，那只是一個例子），所有東西都能正常滑落。但是，我希望新圖像（現代）沒有滑落，而是被舊的（舊谷歌）順利取代。例如，當滑塊位於頁面中間時，有一半的舊谷歌出現在該滑塊上方，一半的現代谷歌消失在該滑塊之上。此時，現代圖像的下半部分仍在滑塊下方。因此，如果圖像包含相同的文字，相互適合，但顏色不同，則可以在任何滑動時間從該圖像中讀取整個文字。我希望我解釋得很好。

來源

2012-08-13 Haradzieniec

這是你想要的。

背景圖片應該保持在原來的位置，所以div與底部對齊。

http://jsfiddle.net/uniisland/9h58G/1/

來源

2012-08-13 07:26:17

對不起，綠框，滑塊應該像滑動一樣向下滑動。但是，圖像應該從頂部消失 - 它不會移動，但會從頂部邊框消失。請參閱我的問題中的解釋。謝謝。 – Haradzieniec 2012-08-13 07:33:10

@Haradzieniec我明白了。現在我明白你的意思了。等一下。 – 2012-08-13 07:39:25

@Haradzieniec更新了我的答案。 – 2012-08-13 08:26:24

我不知道，如果是一個解決方案，但：

我已經包裹身體的CSS在一個div：

<div id="bg"></div> 

#bg{ 
    height: 100%; 
    width: 100%; 
    background-color: #d1e3ec; 
    background-image: url(http://googlechrometutorial.com/images/google-chrome-home.jpg); 
    background-repeat: no-repeat; 
    background-position: top center; 
    position: absolute; 
}

，之後我們可以發青動畫不透明度（或其他淡入淡出...）：

$('#bg').css('opacity', 0); 
$('#slide-link').click(function(){ 

var hid = $('#sliderWrapper').is(':hidden')    
$(this).animate({ top: (1-hid)*($(window).height()) },1500) 
     if(hid) { 
      $('#bg').animate({'opacity':0}, 1000); 
      $('#sliderWrapper').stop().show("slide", { direction:"down" }, 1500); 
     } else { 
      $('#bg').animate({'opacity':1}, 1000);         
      $('#sliderWrapper').stop().hide("slide", { direction:"down" }, 1500); 
     }   
})

來源

2012-08-13 08:07:40

jQuery：向下滑動並以特殊方式替換另一個背景圖像

回答

相關問題