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

Question

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

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

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

这是我到目前为止的代码 - 非常简单：http: //jsfiddle.net/mxQd8/1/

Answer 1

我无法将鼠标滚轮插件上传到小提琴，所以我无法直接演示。你想要的代码是这样的：

$(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 毫秒，具体取决于您希望动画运行的速度。它也会循环——如果你不想让它循环，你必须写一些不同的东西。我必须参加一个会议，但我希望这能让你开始 - 如果我能做任何其他事情来帮助我，请告诉我！

Answer 2

我已经为这个问题编写了一个 jQuery 插件：看看jQuery Transe。