【ColorTrans Color Gradient】
With the color gradient set, you only need to set a timer to display the values of the set in sequence to make a gradient effect.
This gradient is generally divided into two steps, namely (FadeIn) and (FadeOut).
The principle is to change the _index collection index, gradually become larger as it enters, and gradually become smaller as it exits:
Copy the codeThe code is as follows:
//The color gradually increases
FadeIn: function() {
(); this._index++; ();
if(this._index < this._colors.length - 1){
this._timer = setTimeout(Bind(this, ), );
}
},
//The color gradually emerges
FadeOut: function() {
(); this._index--; ();
if(this._index > 0){
this._timer = setTimeout(Bind(this, ), );
}
},
In the SetColor style program, use CssColor to set the style attributes to be modified. For example, the font color is "color" and the background color is "backgroundColor":
Copy the codeThe code is as follows:
var color = this._colors[((0, this._index), this._colors.length - 1)];
this._obj.style[] = "rgb(" + color[0] + "," + color[1] + "," + color[2] + ")";
Since color collections are generated based on the start color, end color and step count, you must regenerate the collection if you want to modify these properties.
The Reset program is used to modify these properties and regenerate the set. After the set is regenerated, the index must also be set back to 0:
Copy the codeThe code is as follows:
//After modifying the color, you must re-get the color collection
color = Extend({ StartColor: this._startColor, EndColor: this._endColor, Step: this._step }, color || {});
//Set properties
this._grads.StartColor = this._startColor = ;
this._grads.EndColor = this._endColor = ;
this._grads.Step = this._step = ;
//Get color collection
this._colors = this._grads.Create();
this._index = 0;
Usage Tips
In the color gradient menu, the link label a is not used because the color of the pseudo-class a cannot be modified directly with js (unless the class is changed).
I didn't think of a good method for the time being, so I had to use onclick to jump instead.
During the test, I also found a problem about arrays. Running alert([,,].length) in ie and ff will show 3 and 2 respectively.
If the last element is not written, ff will ignore this element. As long as it is written, it will not ignore even undefined and null. After reading the following document, it will find the reason.
So in this case, just insert something into it. If you think it’s not good, just new Array.
In the test, a problem with the map of chrome (1.0.154.48) was found. Map is the Array method of js1.6, and both ff and chrome are supported (see here for details).
In ff [,,1].map(function(){return 0}) returns [0,0,0], but chrome returns [,,0].
That is, if the element in chrome is empty (excluding null and undefined), it will return to empty, and the same is true for creating it with new Array.
It feels unreasonable, and it should be improved in the future.
Instructions for use
Copy the codeThe code is as follows:
ColorGrads has only 3 attribute settings:
StartColor: "#ffff",//Start color
EndColor: "#000",//End Color
Step: 20//Gradial Series
After setting the properties, use Create to generate the collection.
ColorTrans only has one parameter. To implement a gradient object, you can set the following properties:
StartColor: "",//Start color
EndColor: "#000",//End Color
Step: 20, //Gradial Series
Speed: 20,//Gradial speed
CssColor: "color"//Set attributes (Scripting attributes)
If you do not set StartColor, the style value obtained by CurrentStyle will be automatically used.
If StartColor, EndColor and Step are to be reset after instantiation, they need to be set with Reset.
Program code
ColorGrads section:
Copy the codeThe code is as follows:
var ColorGrads = function(options){
(options);
= ;
= ;
= ();
};
= {
//Set default properties
SetOptions: function(options) {
= {//Default value
StartColor: "#ffff",//Start color
EndColor: "#000",//End Color
Step: 20//Gradial Series
};
Extend(, options || {});
},
//Get the gradient color collection
Create: function() {
var colors = [],
startColor = (),
endColor = (),
stepR = (endColor[0] - startColor[0]) / ,
stepG = (endColor[1] - startColor[1]) / ,
stepB = (endColor[2] - startColor[2]) / ;
//Generate color set
for(var i = 0, n = , r = startColor[0], g = startColor[1], b = startColor[2]; i < n; i++){
([r, g, b]); r += stepR; g += stepG; b += stepB;
}
(endColor);
//Correction of color value
return Map(colors, function(x){ return Map(x, function(x){
return ((0, (x)), 255);
});});
},
//Get color data
GetColor: function(color) {
if(/^#[0-9a-f]{6}$/(color))
{//#rrggbb
return Map([(1, 2), (3, 2), (5, 2)],
function(x){ return parseInt(x, 16); }
)
}
else if(/^#[0-9a-f]{3}$/(color))
{//#rgb
return Map([(1, 1), (2, 1), (3, 1)],
function(x){ return parseInt(x + x, 16); }
)
}
else if(/^rgb(.*)$/(color))
{//rgb(n,n,n) or rgb(n%,n%,n%)
return Map((/\d+(\.\d+)?\%?/g),
function(x){ return parseInt(("%") > 0 ? parseFloat(x, 10) * 2.55 : x, 10); }
)
}
else
{//color
var mapping = {"red":"#FF0000"};//Omitted
color = mapping[()];
if(color){
return Map([(1, 2), (3, 2), (5, 2)],
function(x){ return parseInt(x, 16); }
)
}
}
}
};
Previous page123Next pageRead the full text