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

视频滚动效果仅适用于某个图像

1 个答案: