每次用户滚动时更改背景图像

时间:2015-04-11 21:05:17

标签: javascript jquery css html5 css3

当我向下滚动页面时,我想在每次滚动而不是向下滚动时将背景图像从一个图像更改为另一个图像。我该如何做到这一点?

1 个答案:

答案 0 :(得分:1)

我为你做了一个样本:https://jsfiddle.net/tp32z47w/

$(function(){

    var count = 0;
   var images = ['http://globe-views.com/dcim/dreams/sky/sky-01.jpg',       
                 'http://fc07.deviantart.net/fs70/i/2010/249/8/f/funny_sky_by_miffliness_stock-d2y71pa.jpg', 
                 'http://images.nationalgeographic.com/wpf/media-live/photos/000/010/cache/mackerel-sky_1054_990x742.jpg'
             ]

    $(window).scroll(function(){       

      $('body').css('background-image','url(' + images[count] + ')');
      $('body').css('background-repeat','no-repeat');

       count = count + 1;
       if(count == images.length) //reset the counter
          count = 0;
    });
});

您可以拥有一系列图片网址。购买增加每个滚动中的计数器变量的值,您可以使用计数器变量作为数组的索引移动到数组中的下一个项目。