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

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/

1. 计算图像的真实高度。

2. 减去显示的div的高度，这就是阈值。

3. 达到此阈值时清除间隔