中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

使用技巧

鏈接標(biāo)簽a的偽類的顏色暫時(shí)沒(méi)有辦法直接用dom來(lái)修改（除非改class）。
所以在顏色漸變菜單中用了個(gè)小技巧，把a(bǔ)的內(nèi)容和跳轉(zhuǎn)換到td的innerHTML和onclick上實(shí)現(xiàn)：

var a = x.getElementsByTagName("a")[0], href = a.href, txt = a.innerHTML;
x.onclick = function(){ location.href = href; }
x.innerHTML = txt;

這樣就可以在不影響可用性的情況下實(shí)現(xiàn)效果。

在測(cè)試過(guò)程中還發(fā)現(xiàn)一個(gè)數(shù)組的問(wèn)題，運(yùn)行alert([,,].length)，在ie會(huì)返回3，其他會(huì)返回2。
在 mozilla的Array_Literals 部分查到：
If you include a trailing comma at the end of the list of elements, the comma is ignored.
即如果數(shù)組字面量元素集合的最后是逗號(hào)，逗號(hào)會(huì)被忽略掉。

使用說(shuō)明

ColorGrads的第一個(gè)參數(shù)是顏色集合，第二個(gè)參數(shù)是漸變級(jí)數(shù)。

ColorTrans只要一個(gè)參數(shù)，要實(shí)現(xiàn)漸變的對(duì)象，可設(shè)置以下屬性：
from: "",//開(kāi)始顏色
to:  "#000",//結(jié)束顏色
step: 20,//漸變級(jí)數(shù)
speed: 20,//漸變速度
style: "color"http://設(shè)置屬性（Scripting屬性）
from默認(rèn)是空值，方便判斷自動(dòng)獲取。
其中from、to和step在實(shí)例化后要修改的話需要用reset來(lái)設(shè)置。
具體使用請(qǐng)參考實(shí)例。

程序代碼

ColorGrads部分：

代碼拷貝框
var ColorGrads = (function(){ //獲取顏色梯度數(shù)據(jù) function GetStep(start, end, step) { var colors = [], start = GetColor(start), end = GetColor(end), stepR = (end[0] - start[0]) / step, stepG = (end[1] - start[1]) / step, stepB = (end[2] - start[2]) / step; //生成顏色集合 for(var i = 0, r = start[0], g = start[1], b = start[2]; i < step; i++){ colors[i] = [r, g, b]; r += stepR; g += stepG; b += stepB; } colors[i] = end; //修正顏色值 return $$A.map(colors, function(x){ return $$A.map(x, function(x){ return Math.min(Math.max(0, Math.floor(x)), 255); });}); } //獲取顏色數(shù)據(jù) var frag; function GetColor(color) { var ret = GetData(color); if (ret === undefined) { if (!frag) { frag = document.createElement("textarea"); frag.style.display = "none"; document.body.insertBefore(frag, document.body.childNodes[0]); }; try { frag.style.color = color; } catch(e) { return [0, 0, 0]; }//ie opera if (document.defaultView) { //opera #rrggbb ret = GetData(document.defaultView.getComputedStyle(frag, null).color); } else { color = frag.createTextRange().queryCommandValue("ForeColor"); ret = [ color & 0x0000ff, (color & 0x00ff00) >>> 8, (color & 0xff0000) >>> 16 ]; } } return ret; } //獲取顏色數(shù)組 function GetData(color) { var re = RegExp; if (/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.test(color)) { //#rrggbb return $$A.map([ re.$1, re.$2, re.$3 ], function(x){ return parseInt(x, 16); }); } else if (/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.test(color)) { //#rgb return $$A.map([ re.$1, re.$2, re.$3 ], function(x){ return parseInt(x + x, 16); }); } else if (/^rgb\((.*),(.*),(.*)\)$/i.test(color)) { //rgb(n,n,n) or rgb(n%,n%,n%) return $$A.map([ re.$1, re.$2, re.$3 ], function(x){ return x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x | 0; }); } } return function(colors, step){ var ret = [], len = colors.length; if ( step === undefined ) { step = 20; } if ( len == 1 ) { ret = GetStep( colors[0], colors[0], step ); } else if ( len > 1 ) { for(var i = 0, n = len - 1; i < n; i++){ var steps = GetStep( colors[i], colors[i+1], step ); i < n - 1 && steps.pop(); ret = ret.concat(steps); } } return ret; } })();
[Ctrl+A 全部選擇 然后拷貝]

ColorTrans部分：

代碼拷貝框
var ColorTrans = function(elem, options){ this._elem = $$(elem); this._timer = null;//定時(shí)器 this._index = 0;//索引 this._colors = [];//顏色集合 this._options = {};//參數(shù)對(duì)象 this._setOptions(options); this.speed = Math.abs(this.options.speed); this.style = this.options.style; this.reset({ from: this.options.from || $$D.getStyle(this._elem, this.style), to: this.options.to, step: Math.abs(this.options.step) }); this._set(); }; ColorTrans.prototype = { //設(shè)置默認(rèn)屬性 _setOptions: function(options) { this.options = {//默認(rèn)值 from: "",//開(kāi)始顏色(默認(rèn)空值方便自動(dòng)獲取) to: "#000",//結(jié)束顏色 step: 20,//漸變級(jí)數(shù) speed: 20,//漸變速度 style: "color"http://設(shè)置屬性（Scripting屬性） }; $$.extend(this.options, options || {}); }, //重設(shè)顏色集合 reset: function(options) { //根據(jù)參數(shù)設(shè)置屬性 this._options = options = $$.extend( this._options, options || {} ); //獲取顏色集合 this._colors = ColorGrads( [ options.from, options.to ], options.step ); this._index = 0; }, //顏色漸入 transIn: function() { this.stop(); this._index++; this._set(); if(this._index < this._colors.length - 1){ this._timer = setTimeout($$F.bind( this.transIn, this ), this.speed); } }, //顏色漸出 transOut: function() { this.stop(); this._index--; this._set(); if(this._index > 0){ this._timer = setTimeout($$F.bind( this.transOut, this ), this.speed); } }, //顏色設(shè)置 _set: function() { var color = this._colors[Math.min(Math.max(0, this._index), this._colors.length - 1)]; this._elem.style[this.style] = "rgb(" + color.join(",") + ")"; }, //停止 stop: function() { clearTimeout(this._timer); } };
[Ctrl+A 全部選擇 然后拷貝]

下載完整實(shí)例

經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2955440-1-1.html

本文鏈接：http://m.95time.cn/tech/web/2009/7147.asp　

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁(yè) JavaScript顏色梯度和漸變效果改進(jìn) [4] 下一頁(yè)

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。