將背景顏色轉換爲偏移位置

使用jQuery和jQuery.Colors，我一直在想出一種方法將背景的顏色與偏移位置關聯起來，因爲我正在滾動一個帶框的div。將背景顏色轉換爲偏移位置

，您可以在這裏查看我的例子： http://coreycapetillo.com/tests/colors/index.html

目前，我有背景顏色變化時偏移位置獲得一定數量範圍內。但是，我想知道是否可以讓它更有機地轉換，模仿固體顏色漸變效果。

我認爲最簡單的解決方法是使用4種不同背景顏色的空白div。然後使用一些基本的數學來設置不透明度（使用不同的偏移每div）到offset（）。left數字。

我正在尋找的東西，將需要較少的空DIV和一些更平滑。這是我第一次在stackOverflow上發佈，所以我希望我已經提供了足夠的信息來獲得一些我需要的方向的指導。

來源

2012-03-01 Stacks on Stacks on Stacks

鏈接似乎被打破。 – 2012-03-01 00:59:24

修正了它！對不起，謝謝你指出。 – 2012-03-01 01:34:52

它可能不完全是你以後的「漸變」效果，但你不能使用偏移來設置一個div上的類（例如，在100px處，設置類「綠色」，在500px設置類「藍色「等），並使用CSS轉換來處理衰落？請參閱示例： http://jsfiddle.net/juanojeda/bKRuQ/

本示例使用點擊，但其原理與偵聽偏移事件的原理相同。

來源

2012-03-01 01:37:02 JuanOjeda

一種方法是使用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);

來源

2012-03-01 01:39:18 Diego

將背景顏色轉換爲偏移位置

回答

相關問題