滾動事件背景變化

我試圖添加滾動事件這將改變一個div也作爲窗口的背景（它具有100％的寬度和高度）的背景。這是我得到的。我並不擅長jquery。我已經看過點擊事件監聽器的教程。但是應用相同的概念，如將滾動事件返回爲假，讓我無處可尋。我也看到一個關於SO的教程，其中人們建議使用數組。但是使用數組讓我非常困惑（主要是由於語法）。滾動事件背景變化

我知道關於像waypoints.js和skrollr.js這樣的插件可以使用，但我需要改變大約50-60（對於滾動時播放視頻的錯覺）......但它不可行。

這裏使用的代碼IM： -

* 
{ 
    border: 2px solid black; 
} 

#frame 
{ 
    background: url('1.jpg') no-repeat; 
    height: 1000px; 
    width: 100%; 
} 

</style>

<script> 

$(function(){ 

for (i=0; i = $.scrolltop; i++) 
{ 
    $("#frame").attr('src', ''+i+'.jpg'); 
} 

}); 

</script> 

<body> 

<div id="frame"></div> 

</body>

來源

2013-01-19 anubhav gupta

當你滾動鼠標或者你想要這個背景變化像圖像鏈（24圖像/秒？）時，你希望'div'的背景滾動嗎？ –

我不想div滾動..我希望它保持靜止...但div的背景應該改變..當用戶滾動...例如在每10px滾動，圖像應該改變.. –

內，您的for循環中，要設置的#frame的src屬性，但它是一個div不是img。

所以，與其這樣：

$("#frame").attr('src', ''+i+'.jpg');

試試這個：

$("#frame").css('background-image', 'url(' + i + '.jpg)');

要滾動事件綁定到目標element使用jQuery：

$('#target').scroll(function() { 
    //do stuff here 
});

要綁定滾動事件到window使用jQuery：

$(window).scroll(function() { 
    //do stuff here 
});

這裏是documentation的jQuery .scroll()。

UPDATE：

如果我的理解沒錯，這裏是你想達到什麼working demo on jsFiddle。

CSS：

html, body { 
    min-height: 1200px; /* for testing the scroll bar */ 
} 

div#frame { 
    display: block; 
    position: fixed; /* Set this to fixed to lock that element on the position */ 
    width: 300px; 
    height: 300px; 
    z-index: -1; /* Keep the bg frame at the bottom of other elements. */ 
}

的Javascript：

$(document).ready(function() { 
    switchImage(); 
}); 

$(window).scroll(function() { 
    switchImage(); 
}); 

//using images from dummyimages.com for demonstration (300px by 300px) 
var images = ["http://dummyimage.com/300x300/000000/fff", 
       "http://dummyimage.com/300x300/ffcc00/000", 
       "http://dummyimage.com/300x300/ff0000/000", 
       "http://dummyimage.com/300x300/ff00cc/000", 
       "http://dummyimage.com/300x300/ccff00/000" 
      ]; 

//Gets a valid index from the image array using the scroll-y value as a factor. 
function switchImage() 
{ 
    var sTop = $(window).scrollTop(); 
    var index = sTop > 0 ? $(document).height()/sTop : 0; 
    index = Math.round(index) % images.length; 
    //console.log(index); 
    $("#frame").css('background-image', 'url(' + images[index] + ')'); 
}

HTML：

<div id="frame"></div>

進一步建議：

我建議你改變體的background-image，而不是股利。但是，如果您必須爲此使用div;那麼您最好在window中添加一個調整大小 event-istener，並在每次調整大小時設置/更新該div的高度。原因是;在任何瀏覽器中，height:100%無法正常工作。

來源

2013-01-19 16:52:55

–

我試過這個...... –

當一個元素有一個滾動條時，會觸發'scroll'事件。沒有滾動條的div沒有觸發這個事件。 –

我已經在我自己之前完成了這項工作，如果我是你，我不會使用圖像作爲背景，而是使用普通的「img」標籤將其添加到頁面的頂部使用一些CSS來確保它保持不變在所有其他元素的背後。通過這種方式，您可以更好地操縱圖像的大小以適應屏幕寬度。我遇到了很多問題，試圖讓背景尺寸正確。

HTML標記：

<body> 
<img src="1.jpg" id="img" /> 
</body>

Script代碼：

$(function(){ 

    var topPage = 0, count = 0; 

    $(window).scroll(function() { 
     topPage = $(document).scrollTop(); 

     if(topPage > 200) { 
      // function goes here 
      $('img').attr('src', ++count +'.jpg'); 
     } 
    }); 
});

我不能完全肯定，如果這是你想要怎麼做，但基本上，當窗口滾動，你將距離的值分配給頁面頂部，然後您可以運行if語句來查看您是否是某個特定點。之後，只需更改運行您想要運行的功能。

如果你想提供一個範圍你希望圖像改變做這樣的事情，所以會發生什麼是這將允許你運行一個函數之間的特定範圍200和400之間的距離是頁面的頂部。

$(function(){ 

    var topPage = 0, count = 0; 

    $(window).scroll(function() { 
     topPage = $(document).scrollTop(); 

     if(topPage > 200 && topPage < 400) { 
      // function goes here 
      $('#img').attr('src', ++count +'.jpg'); 
     } 
    }); 
});

來源

2013-01-19 17:08:08

好吧，你是如何設法用滾動事件來改變圖像的？ –

繼承人小提琴：http://jsfiddle.net/godoploid/8tfNn/ –

你也可以放置這個代碼，以調整img，這將檢查窗口的寬度和高度，並調整圖像大小，它也會隨時改變窗口被改變，雖然我只會調整寬度，以保持img的寬高比： $(window).resize(function() { $('#img').width($(window).width()).height($(window).height()); }); –

滾動事件背景變化

回答

相關問題