一共有 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');
}
}
}
});
最佳答案
window.onscroll
确实会触发很多事件,因此您需要限制它更新图像。如果你查看 Firebug 的网络面板,你可以看到很多中止的图像请求。
节流意味着您需要允许用户跳帧。因此,我重写了您的处理程序以配合当前的滚动百分比。
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);
关于javascript - 视频滚动效果仅在特定图像之前起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20686581/