javascript - 将图像序列绑定(bind)到滚动事件

Question

我有一个 div，里面有一些堆叠的图像。滚动事件应该控制显示的图像。所以我不想在用户滚动时启动动画，我想根据滚动位置更改图片。

我真的很难理解这一点，但我的想法是计算图像数量，获取页面高度，然后将图像数量除以页面高度。这样我就可以为框架定义“区域”——但我不知道这是否可行。

这项技术有什么最佳实践吗？它是如何工作的？

这是我目前的代码 - 原始简单:http://jsfiddle.net/mxQd8/1/

Answer 1

我无法将鼠标滚轮插件上传到 fiddle ，因此无法直接演示。你想要的代码是这样的:

$(document).ready(function () {
    var container = $('#container'),
    // # of pictures
        nImg = 0;    // active picture
        imgNum = $('#container img').length;

    container.mousewheel(function(event, delta, deltaX, deltaY) {
        if(deltaY>0){
             nImg++;   
        }else{
             nImg--;   
        }
        if(nImg>=imgNum){ nImg = 0; }
        if(nImg<0){ nImg = imgNum-1; }

        $(".animated").each(function(){ $(this).removeClass("show") });
        $(".animated").eq(nImg).addClass("show");
    });
});

基本上，您只需要测试滚动上的 deltaY 是负数还是正数(向上滚动或向下滚动)。在此基础上，您可以显示下一张或上一张图片。

这将非常快速地滚动 - 您可能需要创建一个 setTimeout 来将滚动锁定 250/500 毫秒，具体取决于您希望动画进行的速度。它也会循环——如果你不想让它循环，你就必须写一些不同的东西。我必须参加一个 session ，但我希望这能让你开始 - 如果我能做任何其他事情，请告诉我!