视频滚动效果仅在某个图像之前有效

Question

有 100 帧，它只持续到第 28 帧。当您使用鼠标滚动器时，会发生这种情况。

但是如果你尝试使用滚动条并向下，你可以看到它变成了100帧。

如何使鼠标滚动器以相同的方式工作？我注意到每个滚动都是向上或向下 100px，这意味着每 100 像素将显示 1 帧。

如何修改我的代码以使其顺利工作？

这是我的代码，这里是jsfiddle：

var counter = 0;
var scrollArray = []; // array that will have 2 top positions to compare with to see if it is scrolling up or down
$(window).scroll(function() {        
    var top = $(this).scrollTop();       
    if(top > 1 && top < 13000) { // where I want the video to start playing              
        scrollArray.push(top); // pushes values into the array       
        // conditional for keeping 2 values in the array            
        if(scrollArray.length > 1) {
            if(scrollArray[0] < scrollArray[1]) { // 
                counter++;  
            }
            else {
                counter--;
            }   
            scrollArray = [];            
        }
        else {          
            var addCeros = (4 - String(counter).length);
            if(counter <= 100 && counter >= 1) {
                var numPic = ''; 
                for (var i = 0; i < addCeros; i++) {
                    numPic += '0';  
                }
                numPic += counter;
                $('#slide2 img').attr('src', 'http://360langstrasse.sf.tv/tutorial/shared/street/vid-'+numPic+'.jpg');  
                $('#slide2 span').text('http://360langstrasse.sf.tv/tutorial/shared/street/vid-'+numPic+'.jpg');
            }                
        }
    }        
});

Answer 1

window.onscroll确实会触发很多事件，因此您需要限制它更新映像。如果你查看Firebug的网络面板，你可以看到很多中止的图像请求。
限制意味着需要允许用户跳过帧。所以我重写了您的处理程序以与当前的滚动百分比相关联。

http://jsfiddle.net/29qL7/1/

var debounceTimer,
    throttleTimestamp = 0;
function throttleScroll() {
    var dur = 100;
    clearTimeout(debounceTimer);
    if (+new Date - throttleTimestamp > dur) {
        showSlide();
        throttleTimestamp = +new Date;
    } else {
        debounceTimer = setTimeout(function() {
            showSlide();
            throttleTimestamp = +new Date;
        }, dur);
    }
}
function showSlide() {
    var scrollTop = $(window).scrollTop(),
        docHeight = $(document).height(),
        winHeight = $(window).height(),
        scrollPercent = Math.ceil((scrollTop / (docHeight - winHeight)) * 100),
        fileName = "00"+scrollPercent;
    if(scrollPercent<10)fileName = "000"+scrollPercent;
    if(scrollPercent==100)fileName = "0"+scrollPercent;
    if(scrollTop>0){
        $('#slide2 img').attr('src', 'http://360langstrasse.sf.tv/tutorial/shared/street/vid-' + fileName + '.jpg');
    }
}
$(window).scroll(throttleScroll);