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

Question

我的图像有很多颜色。 在页面中向下滚动。 如果图像颜色停止在页面中心，则缩略图图像颜色应自动更改。 缩略图图像颜色用css编写。 该怎么做？

Answer 1

这是我的解决方案： http : //jsfiddle.net/2kc44/或更完整 。

我首先声明一个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});
        }
        });
    });
});