javascript - 视频滚动效果仅在特定图像之前起作用

Question

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

但是如果您尝试使用滚动条并向下滚动，您可以看到滚动条已达到 100 帧。

如何让鼠标滚轮以同样的方式工作？我注意到每个滚动向上或向下 100 像素，这意味着每 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);