我正在尝试使用 this tutorial 进行动态地将收藏中的图像添加到画布上，以在滚动过程中呈现出动画效果，而我希望实现的效果类似于this effect。页面从上到下有三个 div：div_1 是全屏静态图片，div_2 是画布，div_3 是全屏静态图片。在滚过 div_1 后，期望的行为是：
- 当 div_1 不再可视时，鼠标/触控板的滚动操作会停止向下滚动页面
- 暂停在 div_2/画布上
- 鼠标/触控板开始循环遍历收藏中的所有图像（通过画布显示），直到显示最后一张图片
- 滚动动作将恢复并继续向下滚动页面到 div_3。
我无法弄清如何启用/禁用鼠标滚轮事件，因为它与页面顶部的图像循环绑定在一起（可以理解），但我找不到一种方法来触发它，一旦div_1不再可见，然后在基于滚动的动画完成后取消它。
- 当 div_1 不再可视时，鼠标/触控板的滚动操作会停止向下滚动页面
- 暂停在 div_2/画布上
- 鼠标/触控板开始循环遍历收藏中的所有图像（通过画布显示），直到显示最后一张图片
- 滚动动作将恢复并继续向下滚动页面到 div_3。
我无法弄清如何启用/禁用鼠标滚轮事件，因为它与页面顶部的图像循环绑定在一起（可以理解），但我找不到一种方法来触发它，一旦div_1不再可见，然后在基于滚动的动画完成后取消它。
非常感谢您的帮助。
html.erb
<body>
<div class="div_1">
<!-- Full screen image to scroll past -->
</div>
<div class="div_2">
<canvas id="background" width="1280" height="720"></canvas>
</div>
<div class="div_3">
<!-- Full screen image to scroll to once animation is complete -->
</div>
</body>
Javascript
var totalImages = IMAGE_URLS.length;
var images = new Array();
for(var i = 0; i < totalImages; i++) {
var img = new Image;
img.src = IMAGE_URLS[i];
images.push(img);
}
var currentLocation = 0;
var canv;
var context;
$(document).ready(function(){
canv = document.getElementById('background');
context = canv.getContext('2d');
mouseWheel();
// See above for where this gets called
});
var mouseWheel = function() {
window.addEventListener('mousewheel', function(e) {
e.preventDefault(); // No scroll
// The following equation will return either a 1 for scroll down
// or -1 for a scroll up
var delta = Math.max(-1, Math.min(1, e.wheelDelta));
// This code mostly keeps us from going too far in either direction
if(delta == -1) currentLocation += .5;
if(delta == 1) currentLocation -= .5`;
if(currentLocation < 0) currentLocation = 0;
if(currentLocation > images.length)
currentLocation = images.length;
// See below for the details of this function
setImage(currentLocation);
});
}
var setImage = function(newLocation) {
// drawImage takes 5 arguments: image, x, y, width, height
context.drawImage(images[newLocation], 0, 0, 1280, 720);
}
removeEventListener。但是，如果您只想在当前滚动位置为 x 时执行某个操作，并在其为 y 时执行其他操作，请查看 if 语句。 - Kaiidodiv_1和div_3？如果你只是想通过画布滚动浏览一组图片，那么就不需要使用这些 div 元素了。 - Canvas