javascript - 颜色向下滚动时如何更改背景颜色？

Question

我有一张有很多颜色的图片。它在页面中向下滚动。如果图像颜色自动停在页面中央，则缩略图图像颜色应该改变。缩略图图像颜色是用 css 编写的。如何完成这个任务？

Answer 1

这是我的解决方案:http://jsfiddle.net/2kc44/或 more complete .

我首先声明一个包含positions/colors 的数组。
您可以简单地使用:

var colors = {
      0: "#FFFFFF",
    300: "#FF0000",
    600: "#00FF00",
    900: "#0000FF"
}

或有更多参数:

var colors = {
      0: {c: "#FFFFFF", t: "White" },
    300: {c: "#FF0000", t: "Red"   },
    600: {c: "#00FF00", t: "Green" },
    900: {c: "#0000FF", t: "Blue"  }
}

这个函数:

$(window).scroll( changeBG );

function changeBG(e){
    var pos = $(window).scrollTop();
    for (var c in colors)
        if(pos >= c) $("body").css( { backgroundColor: colors[c] } );
}

它很干净，而且很容易添加更多颜色，但还可以进一步优化。