Question

使用jQuery和jQuery.Colors，我一直试图想出一种方法，当我滚动一个框架div时，将背景颜色与偏移位置相关联。

您可以在此处查看我的示例： http://coreycapetillo.com/tests/colors/index.html

目前，当偏移位置达到某个数字范围时，我的背景颜色会发生变化。但是，我想知道我是否可以让它更有机地移动，模仿纯色渐变效果。

我认为最简单的解决方法是拥有4个具有4种不同背景颜色的空div。然后使用一些基本的数学运算将不透明度（使用不同的每个div的偏移量）设置为offset（）。left number。

我正在寻找一些需要更少空DIV和更顺畅的东西。这是我第一次发布stackOverflow，所以我希望我已经提供了足够的信息来获得我需要的指导。

Answer 1

它可能不完全是您所追求的“渐变”效果，但是您无法使用偏移量在一个div上设置一个类（例如，在100px，设置类“绿色”，在500px设置类“蓝色” “等，并使用css过渡来处理褪色？看例子： http://jsfiddle.net/juanojeda/bKRuQ/

此示例使用了点击次数，但其原理与侦听偏移事件相同。

Answer 2

一种方法是使用RGB颜色模型，其中颜色（红色，绿色和蓝色）在0-255范围内。当这些数字转换为十六进制时，您将获得典型的#3399AA颜色格式。

因此，首先，选择使用2种颜色（例如红色和绿色，或绿色和蓝色）。然后，您可以使用javascript：

将偏移量（x，y）映射到颜色

var red = Math.floor(x / divWidth * 255);
var green = Math.floor(y / divHeight * 255);
color = "#" + red.toString(16) + green.toString(16) + "99";

要获得不同的效果，您可以使用HSV颜色模型（色调，饱和度和值）。使用此模型，您可以保持值（亮度）不变，看起来可能比RGB更好。您需要this，其函数为hslToRgb，代码如下所示：

var hue = Math.floor(x / divWidth * 255);
var sat = Math.floor(y / divHeight * 255);
color = hslToRgb(hue, sat, 255); 
color = "#" + color[0].toString(16) + color[1].toString(16) + color[2].toString(16);

将背景颜色转换为偏移位置

2 个答案: