Javascript Color Gradient Effect implementation code _javascript tips

The following is the blogger's some ideas and solutions, if not interested in this, want to directly use the jquery plug-in students, you can point here

Ideas

Each color consists of RGB, each two-bit is a 16 number
The current color code and target color code, converted to 10 number, is a difference, using the difference, set the length of the total execution, calculate the color of each step to change the number of 10
Use Timer to execute
Simply speaking, is the 6-bit color code in order to convert every two bits to 10, and then calculate the difference between the two pairs of RGB values, according to the Set step size (execution times), calculate each step need to increase or decrease the RGB value, and finally become the target color RGB value

Issues that need to be addressed

Convert 6-bit color code to 10
To increase or decrease the number of each step according to the step
Use timers to perform this increase or decrease process
1. Convert 6-bit color code to 10

About 16 into the 10 into the system, the school textbooks have been said. Single *16 0, 10-digit *16 1, and so on. Color is composed of RGB, each two-bit for a group, such as: #123456, r=12,g=34,b=56, but the actual RGB value is 10, so, r=12 can only say that is the corresponding position, 12 to 10 into the system: 2*1+1*16=18,34:4*1+3*16= 52,56:6*1+5*16=96, so rgb=[18,52,96].

This is a number, but the 16 is also a-f, so you have to change the a-f to 10-15, you can first use an array to save the entire 16 binary corresponding number

Copy Code code as follows:

var f=new Array ();
f[' 0 ']=0;
f[' 1 ']=1;
f[' 2 ']=2;
f[' 3 ']=3;
f[' 4 ']=4;
f[' 5 ']=5;
f[' 6 ']=6;
f[' 7 ']=7;
f[' 8 ']=8;
f[' 9 ']=9;
f[' A ']=10;
f[' B ']=11;
f[' C ']=12;
f[' D ']=13;
f[' E ']=14;
f[' F ']=15;

Because color codes are case-insensitive, you can first convert all of the colors to uppercase

Copy Code code as follows:

Code=code.tolocaleuppercase ()//Convert to uppercase
And then 16 into the 10 system.

Code is 6-bit color codes, such as: f07786;
var r=f[code[0]]*16+f[code[1]];
var g=f[code[2]]*16+f[code[3]];
var b=f[code[4]]*16+f[code[5]];

The entire conversion code, written in a method

Copy Code code as follows:

function Colorconversion (code) {
var len=code.length;
var f=new Array ();
f[' 0 ']=0;
f[' 1 ']=1;
f[' 2 ']=2;
f[' 3 ']=3;
f[' 4 ']=4;
f[' 5 ']=5;
f[' 6 ']=6;
f[' 7 ']=7;
f[' 8 ']=8;
f[' 9 ']=9;
f[' A ']=10;
f[' B ']=11;
f[' C ']=12;
f[' D ']=13;
f[' E ']=14;
f[' F ']=15;
Code=code.tolocaleuppercase ()//Convert to uppercase
var s=code.substr (0,1);
if (s== ' # ') {
Code=code.substr (1,6);
}
var r=f[code[0]]*16+f[code[1]];
var g=f[code[2]]*16+f[code[3]];
var b=f[code[4]]*16+f[code[5]];
return [r,g,b];
}

The s in the code is used to determine if the color code has a #, is removed, and finally returns an array containing an RGB value

Calculate increment or decrease in step size

For example, set the number of color changes to 10 times, it is necessary to calculate the 10 changes, each RGB value or decrease in the number of values. The current color of the RGB value and the target color of the RGB difference to the absolute value, and then divided by 10, you can get a step, but this value is likely to be decimals, you can put the decimal place, then in the final step or decrease in the value, directly to the target color RGB value on the line

Copy Code code as follows:

var _step=10;
var _r_step=parseint (Math.Abs (_thisrgb[0]-_torgb[0))/_step); R Increment and Decrease step
var _g_step=parseint (Math.Abs (_thisrgb[1]-_torgb[1))/_step); g Increase and decrease step
var _b_step=parseint (Math.Abs (_thisrgb[2]-_torgb[2))/_step); b Increase or decrease in step

Increase or decrease in each execution

If the execution number is 10, that is to perform 10 consecutive times, when _step=1, even if the execution is completed. Then in the increase or decrease in the step, it will appear, if _step=10, then increase or decrease is 1 time times the step, if the _step=9, that is, the implementation to the second step, that increase or decrease is twice times the step, until _step=1, increase or decrease 9 times times the step. Here you can use a simple calculation

Copy Code code as follows:

var step=10;
var _step=step;
Circulation body
var s= (step-_step) +1;
_step--;

Then determine the current color RGB value and target RGB is to increase or decrease

Copy Code code as follows:

var r=_step==1?_torgb[0]:(_thisrgb[0]>_torgb[0]?_thisrgb[0]-_r_step*s:_thisrgb[0]+_r_step*s);
var g=_step==1?_torgb[1]:(_thisrgb[1]>_torgb[1]?_thisrgb[1]-_g_step*s:_thisrgb[1]+_g_step*s);
var b=_step==1?_torgb[2]:(_thisrgb[2]>_torgb[2]?_thisrgb[2]-_b_step*s:_thisrgb[2]+_b_step*s);

Finally, the color output

Copy Code code as follows:

Obj.css ({' Background-color ': ' RGB (' +r+ ', ' +g+ ', ' +b+ '));

Here is the output of RGB (), it does not matter, and color code the same, if you think or output 6-bit code, then the 10 into the 16 into the system is good

The last is to use the timer to execute, in the middle there is speed and calculation, here is not said. Final Code of execution:

Copy Code code as follows:

/*
Parameters:
OBJ: Target object
Thisrgb: 6-bit code for the current background color
Torgb: 6-bit code for target background color
Thiscolor: 6-bit code for the current text color
Tocolor: 6-bit code for target text color
Step: Number of executions
Speed: Execution speed
*/
function Colorgradient (obj,thisrgb,torgb,thiscolor,tocolor,step,speed) {
var _thisrgb=colorconversion (THISRGB); 16-in-conversion 10-in-system
var _torgb=colorconversion (TORGB);
if (Thiscolor&&tocolor) {
var _thiscolor=colorconversion (thiscolor,1);
var _tocolor=colorconversion (tocolor,1);
}

var Step=step?step:3;
var _step=step;
var _speed=speed?parseint (Speed/step): 30; Calculates the speed of each execution based on the total time
var _r_step=parseint (Math.Abs (_thisrgb[0]-_torgb[0))/_step);
var _g_step=parseint (Math.Abs (_thisrgb[1]-_torgb[1))/_step);
var _b_step=parseint (Math.Abs (_thisrgb[2]-_torgb[2))/_step);

var timer=setinterval (function () {
if (_step>0) {
var s= (step-_step) +1;
var r=_step==1?_torgb[0]:(_thisrgb[0]>_torgb[0]?_thisrgb[0]-_r_step*s:_thisrgb[0]+_r_step*s);
var g=_step==1?_torgb[1]:(_thisrgb[1]>_torgb[1]?_thisrgb[1]-_g_step*s:_thisrgb[1]+_g_step*s);
var b=_step==1?_torgb[2]:(_thisrgb[2]>_torgb[2]?_thisrgb[2]-_b_step*s:_thisrgb[2]+_b_step*s);
Obj.css ({' Background-color ': ' RGB (' +r+ ', ' +g+ ', ' +b+ '));
if (Thiscolor&&tocolor) {
var cr=_step==1?_tocolor[0]:(_thiscolor[0]>_tocolor[0]?_thiscolor[0]-_r_step*s:_thiscolor[0]+_r_step*s);
var cg=_step==1?_tocolor[1]:(_thiscolor[1]>_tocolor[1]?_thiscolor[1]-_g_step*s:_thiscolor[1]+_g_step*s);
var cb=_step==1?_tocolor[2]:(_thiscolor[2]>_tocolor[2]?_thiscolor[2]-_b_step*s:_thiscolor[2]+_b_step*s);
Obj.css ({' Color ': ' RGB ' (' +cr+ ', ' +cg+ ', ' +cb+ ') ');
}
_step--;
}else{
Clearinterval (timer);
return true;
}
},_speed);
}

This method is simple, but the smoothness of the gradient is general, especially when a group of objects executes continuously. Can only say that this is a very hanging silk, very stupid method, the great God is using the tween algorithm

jquery Color Gradient Plugin
Jquery.animate-colors-min.js

Using the method, you can use the jquery animate directly, but you don't have to specify the current color, the program will automatically take the current color, but you must set the background in the style

Copy Code code as follows:

Obj.animate ({' Background-color ': ' #ff0000 ', ' Color ': ' #000000 '});