javascript生成渐变文字效果(非css3)

效果预览：

我是渐变文字
我是渐变文字
我是渐变文字
// var Text3D = function(options) {
var gradientColor = function(a,b,step,n){
var color = ['#'];
for(var i =0;i<3;i++){

//渐变颜色阶梯公式：A+(B-A)/step*n
var c = Math.round( a[i]+(b[i]-a[i])/step * n).toString(16);
if(c.length == 1)
c = '0'+c;
color.push( c);
}
return color.join('');
}

var color2Rgb = function(color) {
if (color.charAt(0) != '#') return;
if (color.length == 4) {
var str = '#';
for (var i = 1; i < 4; i++) {
str += color.slice(i, i + 1).concat(color.slice(i, i + 1));
}

color = str;
}

var rgb = [];

for (i = 1; i < 7; i += 2) {
rgb.push(parseInt(color.slice(i, i + 2), 16));
}

return rgb || [0,0,0];
}

var getCurrentStyle = function(el) {
if (el.currentStyle) {
return el.currentStyle;
} else if (window.getComputedStyle) {
return getComputedStyle(el, null);
}
return null;
}

var _extend = function() {
var args = Array.prototype.slice.call(arguments);
if (args.length == 1)
args.unshift({});
for (var name in args[1]) {
if (args[1].hasOwnProperty(name)) {
args[0][name] = args[1][name];
}
}
return args[0];
}

var defaults = {
el: null,
form:'#fff',
to:'#000',
isShade:true
}

options = _extend(defaults, options || {});

if (!options.el) return;

var el = options.el,
style = getCurrentStyle(el),
width = parseInt( style.width),
height = parseInt(style.height) ,
h = height* 1.5;

return {
init: function() {
var fragment = document.createDocumentFragment();
var from = color2Rgb(options.form),
to = color2Rgb(options.to),
text = el.innerText || el.textContent;
for (var i = 0; i < h; i++) {
var color = gradientColor(from,to,h,i+1);
var span = document.createElement('span');
span.innerHTML = ''+text+'';

fragment.appendChild(span.childNodes[0]);
span=null;
}
el.style.position='relative';
el.style.width = width+'px';
el.style.height = height+'px';
el.innerHTML ='';

el.appendChild(fragment);
}
}
}

var test3d = new Text3D({
el: document.getElementById('id_txt'),
form:'#fff',
to:'#FF0000'
})
test3d.init();
var test3d1 = new Text3D({
el: document.getElementById('id_txt1'),
form:'#fff',
to:'#FFff00'
})
test3d1.init();
var test3d2 = new Text3D({
el: document.getElementById('id_txt2'),
form:'#fff',
to:'#FF00ff'
})
test3d2.init();
// ]]>

HTML:

<div id="id_txt" style="margin-left:20px; font-family: verdana;font-size: 44px; position: relative; width:500px; height:80px;font-family:微软雅黑;">
我是渐变文字
</div>

Javascript:

function $(id) {     return document.getElementById(id); }

var Text3D = function(options) {
var gradientColor = function(a,b,step,n){
var color = ['#'];
for(var i =0;i<3;i++){

//渐变颜色阶梯公式：A+(B-A)/step*n
var c = Math.round( a[i]+(b[i]-a[i])/step * n).toString(16);
if(c.length == 1)
c = '0'+c;
color.push(  c);
}
return color.join('');
}

var color2Rgb = function(color) {
if (color.charAt(0) != '#') return;
if (color.length == 4) {
var str = '#';
for (var i = 1; i < 4; i++) {
str += color.slice(i, i + 1).concat(color.slice(i, i + 1));
}

color = str;
}

var rgb = [];

for (i = 1; i < 7; i += 2) {
rgb.push(parseInt(color.slice(i, i + 2), 16));
}

return rgb || [0,0,0];
}

var getCurrentStyle = function(el) {
if (el.currentStyle) {
return el.currentStyle;
} else if (window.getComputedStyle) {
return getComputedStyle(el, null);
}
return null;
}

var _extend = function() {
var args = Array.prototype.slice.call(arguments);
if (args.length == 1)
args.unshift({});
for (var name in args[1]) {
if (args[1].hasOwnProperty(name)) {
args[0][name] = args[1][name];
}
}
return args[0];
}

var defaults = {
el: null,
form:'#fff',
to:'#000',
isShade:true
}

options = _extend(defaults, options || {});

if (!options.el) return;

var el = options.el,
style = getCurrentStyle(el),
width = parseInt( style.width),
height = parseInt(style.height) ,
h = height* 1.5;

return {
init: function() {
var fragment = document.createDocumentFragment();
var from = color2Rgb(options.form),
to = color2Rgb(options.to),
text = el.innerText || el.textContent;
for (var i = 0; i < h; i++) {
var color = gradientColor(from,to,h,i+1);
var span = document.createElement('span');
span.innerHTML = '<span style="display:block; position: relative; height:1px; overflow:hidden; top: 0; z-index:5;color:'+ color +'"><span style="display:block; position:absolute;top:'+ (-i-1) +'px;">'+text+'</span></span>';
fragment.appendChild(span.childNodes[0]);
span=null;
}
el.style.position='relative';
el.style.width = width+'px';
el.style.height = height+'px';
el.innerHTML ='';
el.appendChild(fragment);
}
}
}

var test3d = new Text3D({
el: $('id_txt'),
form:'#fff',
to:'#FF0000'
})
test3d.init();