網頁制作poluoluo文章簡介：很久沒寫blog，太忙了。沒什麼時間寫復雜的東西，重新把顏色漸變效果寫一遍。 關於顏色的效果一般就兩個，顏色梯度變化和樣式的顏色漸變，前者在ie中一般用濾鏡實現。 實例效果 預覽效果1： 這是一個顏色梯度變化演示： 運行代碼框 !DOCTYPE html public -//W3C//DTD X
很久沒寫blog，太忙了。沒什麼時間寫復雜的東西，重新把顏色漸變效果寫一遍。
關於顏色的效果一般就兩個，顏色梯度變化和樣式的顏色漸變，前者在ie中一般用濾鏡實現。
實例效果
預覽效果1：
這是一個顏色梯度變化演示：
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
預覽效果2：
一個顏色漸變的菜單：
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
預覽效果3：
顏色漸變的有趣應用，點擊隨機顏色漸變：
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
網頁制作poluoluo文章簡介：很久沒寫blog，太忙了。沒什麼時間寫復雜的東西，重新把顏色漸變效果寫一遍。 關於顏色的效果一般就兩個，顏色梯度變化和樣式的顏色漸變，前者在ie中一般用濾鏡實現。 實例效果 預覽效果1： 這是一個顏色梯度變化演示： 運行代碼框 !DOCTYPE html public -//W3C//DTD X
【ColorGrads顏色梯度】
程序ColorGrads的作用是通過StartColor和EndColor生成顏色梯度集合。
顏色都可以用紅(r)、綠(g)、藍(b)三個顏色來表示。
程序中先通過GetColor把一般的顏色表示形式轉化成一個用紅(r)、綠(g)、藍(b)三個顏色值作元素的集合。
那就首先要知道有什麼顏色表示形式，從 w3c的Colors部分 可以知道有以下形式：
關鍵詞模式：
em { color: red }
RGB顏色模式：
em { color: #f00 }
em { color: #ff0000 }
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }
以上都是表示同一種顏色（紅色）。
獲取顏色屬性的形式在ie和ff並不同，ff統一返回RGB顏色模式的第三種形式，ie則按照設置時的形式返回。
先說說RGB顏色模式，前兩種比較常用應該都明白他們的區別吧，它用的是16進制表示形式，而我們想要10進制的。
把一個16進制表示的字符轉成10進制數字，一般用parseInt，在substr截取字符之後就可以用parseInt轉換。
對於#ff0000這個形式可以這樣轉換：
return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
function(x){ return parseInt(x, 16); }
)
parseInt的第二個參數就是第一個參數的進制值。
對於#f00形式，跟上一個差不多，只是轉換之前要先換成完整表示形式：
return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1)],
function(x){ return parseInt(x + x, 16); }
)
後面兩種可能用的就比較少了，一個用10進制的rgb顏色值表示，另一個用百分比來表示。
ff嚴格按照那樣的格式來表示，而ie就“放松”很多，例如：
ie可以允許數字百分比混用，ff不可以；
ff必須有逗號分隔，ie可以只用空格分隔；
當然我們使用時最好是按照w3c的標准來設置了。
ps：那個DHTML 手冊上寫的 EM { color: rgb 1.0 0.0 0.0 } 根本不能用的，不要被誤導了。
對這個形式，程序用正則取得數值，如果有%就根據百分比計算出對應數值：
return Map(color.match(/\d+(\.\d+)?\%?/g),
function(x){ return parseInt(x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x, 10); }
)
而關鍵詞大家都很熟悉，要轉化卻很麻煩，因為沒有一定規律只能一個一個對應：
var mapping = {"red":"#FF0000"};//略
color = mapping[color.toLowerCase()];
if(color){
return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
function(x){ return parseInt(x, 16); }
)
}
網頁制作poluoluo文章簡介：很久沒寫blog，太忙了。沒什麼時間寫復雜的東西，重新把顏色漸變效果寫一遍。 關於顏色的效果一般就兩個，顏色梯度變化和樣式的顏色漸變，前者在ie中一般用濾鏡實現。 實例效果 預覽效果1： 這是一個顏色梯度變化演示： 運行代碼框 !DOCTYPE html public -//W3C//DTD X
在Create創建顏色集合程序中獲得開始顏色和結束顏色的數據後，再根據Step（多少步）就可以獲得步長了：
startColor = this.GetColor(this.StartColor),
endColor = this.GetColor(this.EndColor),
stepR = (endColor[0] - startColor[0]) / this.Step,
stepG = (endColor[1] - startColor[1]) / this.Step,
stepB = (endColor[2] - startColor[2]) / this.Step;
再根據步長生成集合：
for(var i = 0, n = this.Step, r = startColor[0], g = startColor[1], b = startColor[2]; i < n; i++){
colors.push([r, g, b]); r += stepR; g += stepG; b += stepB;
}
colors.push(endColor);
正確的顏色值是在0到255之間的，而且是不帶小數的，所以最好修正一下
return Map(colors, function(x){ return Map(x, function(x){
return Math.min(Math.max(0, Math.floor(x)), 255);
});});
【ColorTrans顏色漸變】
有了顏色梯度集合，只需要設個定時器把集合的值依次顯示就是一個漸變效果了。
這個漸變一般是分兩個步驟，分別是（FadeIn）和漸出（FadeOut）。
原理就是通過改變_index集合索引，漸入時逐漸變大，漸出時逐漸變小：
//顏色漸入
FadeIn: function() {
this.Stop(); this._index++; this.SetColor();
if(this._index < this._colors.length - 1){
this._timer = setTimeout(Bind(this, this.FadeIn), this.Speed);
}
},
//顏色漸出
FadeOut: function() {
this.Stop(); this._index--; this.SetColor();
if(this._index > 0){
this._timer = setTimeout(Bind(this, this.FadeOut), this.Speed);
}
},
在SetColor設置樣式程序中，通過CssColor來設置要修改的樣式屬性，例如字體顏色是"color"，背景色是"backgroundColor"：
var color = this._colors[Math.min(Math.max(0, this._index), this._colors.length - 1)];
this._obj.style[this.CssColor] = "rgb(" + color[0] + "," + color[1] + "," + color[2] + ")";
由於顏色集合是根據開始顏色、結束顏色和步數生成的，所以如果要修改這些屬性必須重新生成過集合。
Reset程序就是用來修改這些屬性並重新生成集合的，集合重新生成後索引也要設回0：
//修改顏色後必須重新獲取顏色集合
color = Extend({ StartColor: this._startColor, EndColor: this._endColor, Step: this._step }, color || {});
//設置屬性
this._grads.StartColor = this._startColor = color.StartColor;
this._grads.EndColor = this._endColor = color.EndColor;
this._grads.Step = this._step = color.Step;
//獲取顏色集合
this._colors = this._grads.Create();
this._index = 0;
網頁制作poluoluo文章簡介：很久沒寫blog，太忙了。沒什麼時間寫復雜的東西，重新把顏色漸變效果寫一遍。 關於顏色的效果一般就兩個，顏色梯度變化和樣式的顏色漸變，前者在ie中一般用濾鏡實現。 實例效果 預覽效果1： 這是一個顏色梯度變化演示： 運行代碼框 !DOCTYPE html public -//W3C//DTD X
使用技巧
在顏色漸變菜單中，並沒有使用鏈接標簽a，原因是a的偽類的顏色並不能直接用js來修改（除非改class）。暫時沒想到很好的方法，只好用onclick跳轉代替了。
在測試過程中還發現一個關於數組的問題，在ie和ff運行alert([,,].length)會分別顯示3和2。最後一個元素不寫的話ff就會忽略這個元素，只要寫的話就不會忽略即使是undefined和null，看了下文檔也找到原因。所以這個情況還是插一個東西進去，覺得不好看就new Array好了。
測試中還發現chrome(1.0.154.48)的map一個問題，map是js1.6的Array的方法，ff和chrome都支持（具體看這裡）。在ff中[,,1].map(function(){return 0})返回的是[0,0,0]，但chrome卻返回[,,0]。即在chrome中如果元素是空(不包括null和undefined)的話就一律返回空，用new Array來創建也一樣。感覺這樣不太合理，應該以後會改進吧。
使用說明
ColorGrads只有3個屬性設置：
StartColor: "#fff",//開始顏色
EndColor: "#000",//結束顏色
Step: 20//漸變級數
設置好屬性後用Create生成集合就行了。
ColorTrans只要一個參數，要實現漸變的對象，可設置以下屬性：
StartColor: "",//開始顏色
EndColor: "#000",//結束顏色
Step: 20,//漸變級數
Speed: 20,//漸變速度
CssColor: "color"//設置屬性（Scripting屬性）
如果不設置StartColor會自動使用CurrentStyle獲取的樣式值。
其中StartColor、EndColor和Step在實例化後要重新設置的話需要用Reset來設置。
具體使用請參考實例。
程序代碼
ColorGrads部分：
var ColorGrads = function(options){
this.SetOptions(options);
this.StartColor = this.options.StartColor;
this.EndColor = this.options.EndColor;
this.Step = Math.abs(this.options.Step);
};
ColorGrads.prototype = {
//設置默認屬性
SetOptions: function(options) {
this.options = {//默認值
StartColor: "#fff",//開始顏色
EndColor: "#000",//結束顏色
Step: 20//漸變級數
};
Extend(this.options, options || {});
},
//獲取漸變顏色集合
Create: function() {
var colors = [],
startColor = this.GetColor(this.StartColor),
endColor = this.GetColor(this.EndColor),
stepR = (endColor[0] - startColor[0]) / this.Step,
stepG = (endColor[1] - startColor[1]) / this.Step,
stepB = (endColor[2] - startColor[2]) / this.Step;
//生成顏色集合
for(var i = 0, n = this.Step, r = startColor[0], g = startColor[1], b = startColor[2]; i < n; i++){
colors.push([r, g, b]); r += stepR; g += stepG; b += stepB;
}
colors.push(endColor);
//修正顏色值
return Map(colors, function(x){ return Map(x, function(x){
return Math.min(Math.max(0, Math.floor(x)), 255);
});});
},
//獲取顏色數據
GetColor: function(color) {
if(/^#[0-9a-f]{6}$/i.test(color))
{//#rrggbb
return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
function(x){ return parseInt(x, 16); }
)
}
else if(/^#[0-9a-f]{3}$/i.test(color))
{//#rgb
return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1)],
function(x){ return parseInt(x + x, 16); }
)
}
else if(/^rgb(.*)$/i.test(color))
{//rgb(n,n,n) or rgb(n%,n%,n%)
return Map(color.match(/\d+(\.\d+)?\%?/g),
function(x){ return parseInt(x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x, 10); }
)
}
else
{//color
var mapping = {"red":"#FF0000"};//略
color = mapping[color.toLowerCase()];
if(color){
return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
function(x){ return parseInt(x, 16); }
)
}
}
}
};
網頁制作poluoluo文章簡介：很久沒寫blog，太忙了。沒什麼時間寫復雜的東西，重新把顏色漸變效果寫一遍。 關於顏色的效果一般就兩個，顏色梯度變化和樣式的顏色漸變，前者在ie中一般用濾鏡實現。 實例效果 預覽效果1： 這是一個顏色梯度變化演示： 運行代碼框 !DOCTYPE html public -//W3C//DTD X
ColorTrans部分：
var ColorTrans = function(obj, options){
this._obj = $(obj);
this._timer = null;//定時器
this._index = 0;//索引
this._colors = [];//顏色集合
this._grads = new ColorGrads();
this.SetOptions(options);
this.Speed = Math.abs(this.options.Speed);
this.CssColor = this.options.CssColor;
this._startColor = this.options.StartColor || CurrentStyle(this._obj)[this.CssColor];
this._endColor = this.options.EndColor;
this._step = Math.abs(this.options.Step);
this.Reset();
this.SetColor();
};
ColorTrans.prototype = {
//設置默認屬性
SetOptions: function(options) {
this.options = {//默認值
StartColor: "",//開始顏色
EndColor: "#000",//結束顏色
Step: 20,//漸變級數
Speed: 20,//漸變速度
CssColor: "color"//設置屬性（Scripting屬性）
};
Extend(this.options, options || {});
},
//重設顏色集合
Reset: function(color) {
//修改顏色後必須重新獲取顏色集合
color = Extend({ StartColor: this._startColor, EndColor: this._endColor, Step: this._step }, color || {});
//設置屬性
this._grads.StartColor = this._startColor = color.StartColor;
this._grads.EndColor = this._endColor = color.EndColor;
this._grads.Step = this._step = color.Step;
//獲取顏色集合
this._colors = this._grads.Create();
this._index = 0;
},
//顏色漸入
FadeIn: function() {
this.Stop(); this._index++; this.SetColor();
if(this._index < this._colors.length - 1){
this._timer = setTimeout(Bind(this, this.FadeIn), this.Speed);
}
},
//顏色漸出
FadeOut: function() {
this.Stop(); this._index--; this.SetColor();
if(this._index > 0){
this._timer = setTimeout(Bind(this, this.FadeOut), this.Speed);
}
},
//顏色設置
SetColor: function() {
var color = this._colors[Math.min(Math.max(0, this._index), this._colors.length - 1)];
this._obj.style[this.CssColor] = "rgb(" + color[0] + "," + color[1] + "," + color[2] + ")";
},
//停止
Stop: function() {
clearTimeout(this._timer);
}
};