基於滾動位置更改圖像

-3

我需要一些幫助，以我的JavaScript和/或jQuery。我是一名設計師，我試圖創造一些很酷的動畫效果。具體來說，根據滾動位置，我想更改圖像。我的工作在html：基於滾動位置更改圖像

的JavaScript：

<script type="text/javascript"> 
var yPos; 
function yScroll(){ 
yPos = window.pageYOffset; 
if(yPos < 20){ 
    $("#phone").attr("src", "assets/img/phone-right.png"); 
    } if(yPos < 40) { 
     $("#phone").attr("src", "assets/img/phone-front.png"); 
    } if(yPos > 41){ 
     $("#phone").attr("src", "assets/img/phone-left.png"); 
    } 
window.addEventListener("scroll", yScroll);} 
</script>

再次，我是一個設計師，想要實現通過JavaScript和/或jQuery的一些很酷的效果。誰能幫忙？

來源

2015-11-01 Joseph Leonard

的HTML缺少...請描述你已經擁有什麼怎麼不工作。 –

下面是一些代碼，你可以使用

$(document).ready(function(){ 

    var containerHeight = $('#container').height(); 

    $(window).scroll(function(){ 
     var scrollPosition = $(window).scrollTop(); 
     if (scrollPosition > (containerHeight/2)) 
     { 
      $('img').attr("src", "http://www.cosplay.com/i/costumes/200/313779.jpg"); 
     } 
     else if (scrollPosition < (containerHeight/2)) 
     { 
      $('img').attr("src", "http://www.unikgamer.com/characters/face/ryu-street-fighter-85.jpg"); 
     } 

    }) // scroll function 

})// end document

我所做的就是創造足夠大的可滾動容器和測試代碼。然後使用.height（）我得到了容器的高度（1200px）。現在創建一個函數，當窗口滾動使用$（window）.scroll（）

當觸發使用$（window）.scrollTop（）滾動的像素時，最後在此函數內創建另一個變量。

如果窗口滾動大於容器高度的一半大小，則將img src屬性更改爲另一個圖像。

如果窗口滾動小於容器高度的一半，則將img src屬性更改爲原始圖像。這是小提琴。我希望這有助於

https://jsfiddle.net/PatoSalazarC/72pg342w/3/

來源

2015-11-01 05:12:20

基於滾動位置更改圖像

回答

相關問題