$(function() {
$(s).each(function() {
var el = this;
var from = $(el).attr(‘gradFromColor’)||’#ffffff’, to = $(el).attr(‘gradToColor’)||’#000000′;
var fR = parseInt(from.substring(1, 3), 16),
fG = parseInt(from.substring(3, 5), 16),
fB = parseInt(from.substring(5, 7), 16),
tR = parseInt(to.substring(1, 3), 16),
tG = parseInt(to.substring(3, 5), 16),
tB = parseInt(to.substring(5, 7), 16);
var h = $(this).height() * 1.5;
var html,cacheHTML=[];
this.initHTML = html = this.initHTML||this.innerHTML;
this.innerHTML = ”;
for (var i = 0; i < h; i++) {
var c = ‘#’ + (Math.floor(fR * (h – i) / h + tR * (i / h))).toString(16) + (Math.floor(fG * (h – i) / h + tG * (i / h))).toString(16) + (Math.floor(fB * (h – i) / h + tB * (i / h))).toString(16);
cacheHTML.push(‘<span class=”rainbow rainbow-‘ + i + ‘” style=”color: ‘ + c + ‘;”><span style=”top: ‘ + ( – i – 1) + ‘px;”>’ + html + ‘</span></span>’)
}
cacheHTML.push(‘<span class=”highlight”>’ + html + ‘</span>’,'<span class=”shadow”>’ + html + ‘</span>’);
$(cacheHTML.join(”)).appendTo(this)
})
})
}
//这个部分就是调用了，传入要添加效果的元素，这里可以是jquery的任意选择符。
initGradients(‘.rainbows’);
代码看起来并不算多，但是如果想明白原理的话还是要认真的理解下这个代码的。
结合JS/CSS我们可以看出其大概的思路如下：
程序首先算出字体所在容器的高度N，然后清空容器内容，并添加N个span，每个span内容都为原容器的文字，每个span的颜色根据渐变色进行计算，而且其中的文字定位都相比之前一个span的文字向上偏移一个像素。CSS中可以看到，每个span的高度都为1。这样，我们就通过N各不同颜色的1px的span把字体“拼”出来了，然后加上“高光/阴影”就搞定。
基于jQuery的立体文字渐变效果
