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

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

你的意思是这样的吗：

(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);

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

How to stop the background-position change when the background image reaches bottom?

javascript

jquery

background-image