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

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

---

可能是一个起点：在这里，您可以根据滚动位置定义颜色

$(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});
    });
});

---

也许有一点可以从这里开始：您可以根据滚动位置定义颜色

$(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});
    });
});

以下是我的解决方案：或者

我首先声明一个

位置的数组

/

颜色

您可以简单地使用：

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

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

这是我的解决方案：或者

我首先声明一个

位置的数组

/

颜色

您可以简单地使用：

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

---

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

据我所知，我制作了一把小提琴：

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

$（文档）.ready（函数（）{
$（“#颜色”）。滚动（函数（事件）{
$（'.clor'）。每个（函数（）{
var s=$（this.attr（'id'）；
var r=s.子串（1,2）；
var calc=parseInt（r）-1；
如果（$（“#颜色”）.scrollTop（）>=（$（'.clor'）.height（）*calc）和（$（“#颜色”）.scrollTop（）根据我的理解，我创建了一个小提琴：


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

$（文档）.ready（函数（）{
$（“#颜色”）。滚动（函数（事件）{
$（'.clor'）。每个（函数（）{
var s=$（this.attr（'id'）；
var r=s.子串（1,2）；
var calc=parseInt（r）-1；
如果（$（“#colors”）.scrollTop（）>=（$（'.clor'）.height（）*calc）和（$（“#colors”）.scrollTop（）可以添加一个提琴来解释这个问题吗？我不知道怎么做。我只需要在滚动左侧图像时缩略图的颜色会改变。我将尝试创建一个提琴。请参阅以获取我的答案later@Zword谢谢你（字：）你能添加一个提琴来解释这一点吗？我不知道怎么做。我唯一需要的是当左侧图像滚动时，缩略图的颜色应该改变。我将尝试创建一个提琴。有关我的答案，请参阅later@Zword谢谢你（字：）