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

Question

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

Answer 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  });
});