使用滚动条淡入一堆图像（div）

Posted 2023-03-06

【中文标题】使用滚动条淡入一堆图像（div）

【英文标题】：fading through a stack of images(divs) with scrollbar

【发布时间】：2012-06-28 06:16:37

【问题描述】：

我正在为博物馆制作 ipad 网络应用程序。想要展示名画的红外和z射线扫描结果。所以我想要固定的 div - 堆叠。 original/infrared/x-ray/more+ 并使用滚动条将它们一一淡出（平滑）。我已经达到了这个 jsfiddle http://jsfiddle.net/sheriffderek/JDLqV/1/ 但我担心我会以错误的方式解决这个问题。 ---我应该采取其他方向的任何想法？我还没想好怎么下到第三层...谢谢

【问题讨论】：

我不知道您将显示多少图像，但您绝对应该研究内存管理。 ios 的内置 Safari 浏览器在显示大图像时会很快耗尽内存，而且似乎没有适用于所有 iOS 版本的通用解决方案。

也许你可以只加载两张图片和 .remove();上一个当这个的不透明度== 0 ??

我只是在制作模型以“推销”客户老板......所以我会记住这个记忆。谢谢。

至于 .remove... 我在一些测试中使用了它 - 但它不会让用户控制淡入淡出... 这是为了看到底色的细微变化.. . 像轻轻移动一只手臂。不能真正进入它 - 如果你不能控制淡入淡出......也许我没有使用它的所有功能......

你有没有在 iPad 上测试过你目前拥有的东西？如果我没记错的话，javascript 是在滚动后评估的，所以你可能也必须考虑到这一点。

【参考方案1】：

这将使您深入三个层次：http://jsfiddle.net/JDLqV/2/

可能会被改进为更通用：

var divs = $('div.img:eq(2)');
$(window).on('scroll', function() 
    var st = $(this).scrollTop();
    var val = 1 - st/700; 
    if(val < 0)
        divs = $('div.img:eq(1)'); 
        val = 2 - st/700; 
    else if(val > 0)
        divs = $('div.img:eq(2)'); 
    
    divs.css( 'opacity' : val  );
);

【讨论】：

它有效！谢谢你的时间......不幸的是，ipad 没有实时评估滚动......这搞砸了我的方法......但是谢谢。

@sheriffderek - 没问题。实际上，考虑到几行代码和它们产生的戏剧性效果，我认为您的方法很巧妙（在 jsFiddle 中也不少！）。可惜它不适合 iPad，希望你能找到更合适的方法。

我喜欢简单！我一直在考虑关闭 safari 滚动条并使用 jquery 滚动条并试图与之挂钩……不过分心了。