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

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

它很干净，并且很容易添加更多颜色，但它可以更加优化。

Answer 2

也许从一点开始：http://jsfiddle.net/Z47mY/在这里，您可以根据滚动位置定义颜色。

$(document).ready(function() {
    $(window).scroll(function(event) {
        var color="#ffffff";
        var position = $(window).scrollTop() / $(window).height();
        if(position > 0.3) {
            color="#ff0000";
        }
        if(position > 0.8) {
            color="#00ff00";
        }
        $("body").css({backgroundColor: color});
    });
});

Answer 3

据我所知，我创造了一个小提琴：

http://jsfiddle.net/Zword/6Kkmf/

<强> JQuery的：

$(document).ready(function() {
    $("#colors").scroll(function(event) {
        $('.clor').each(function(){
        var s=$(this).attr('id');
        var r=s.substring(1,2);
        var calc=parseInt(r)-1;
        if($("#colors").scrollTop()>=($('.clor').height()*calc) && $("#colors").scrollTop()<($('.clor').height()*r))
        {
        var color=$('#'+s).css('backgroundColor');
        $("#preview").css({backgroundColor: color});
        }
        });
    });
});