Question

使用Javascript：

 (function($) {  

        var x = 0;  
        var y = 0;  
        //cache a reference to the banner  
        var banner = $("#banner");  

        // set initial banner background position  
        banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px');  

        // scroll up background position every 90 milliseconds  
        window.setInterval(function() {  
            banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px');  
            y--;  
            //x--;  

            //if you need to scroll image horizontally -  
            // uncomment x and comment y  

        }, 90);  

})(jQuery);

CSS：

div#banner {  
  width: 960px;  
  height: 200px;  
  margin: auto;  
  background: url(../images/fotogrph-skyscraping.jpg) repeat 0 0;  
}

HTML：

<div id="banner"></div>

当背景图像到达底部时，我无法将位置更改停止。

Answer 1

http://jsfiddle.net/naeemshaikh27/u0x15oj3/

计算图像的实际高度。
减去显示的div的高度，这是阈值。
清除达到此阈值的时间间隔

Answer 2

你的意思是这样的：

＆＃13;

(function($) {  

  var x = 0;  
  var y = 0;  
  //cache a reference to the banner  
  var banner = $("#banner");  

  // set initial banner background position  
  banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px');  

  // scroll up background position every 90 milliseconds  
  var timer = window.setInterval(function() {  
    if(y > -200){
      banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px');  
      y--;  
      //x--;  

      //if you need to scroll image horizontally -  
      // uncomment x and comment y  
    } else {
      clearInterval(timer);
    }
  }, 90);  

})(jQuery);

＆＃13;

如何在背景图像到达底部时停止背景位置变化？

2 个答案: