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 ms，具体取决于你想要动画的速度。它也会循环 - 如果你不想让它循环，你将不得不写一些不同的东西。我必须参加一个会议，但我希望这能让你开始 - 让我知道我是否可以做任何事来帮助你！

Answer 2

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

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

2 个答案: