jQuery实现的立体文字渐变效果

先截两个图看看：

效果很不错吧？会不会误以为这些字体是图片？这可不是图片，而是用JS实现的

在线演示 http://demo.phpstudy.net/js/gradient-test/demo.htm

下面来简单分享下实现过程及原理(网站中使用了jquery这个lib，我们这里就不再自己单独实现了，我们这里分享的也是jquery的实现方法)：

HTML代码：

复制代码 代码如下:

© 2009 Dragon Interactive. All Rights Reserved.

为了便于代码重用，我们通过class来标识出哪些文字需要增加这个特效，这里用的是rainbows。

CSS代码：

复制代码 代码如下:

.rainbows{position:relative;display:block;} .rainbow { background: transparent; display: block; position: relative; height: 1px; overflow: hidden; z-index: 5; } .rainbow span { position: absolute; display: block; top: 0; left: 0px; } .rainbows .highlight { color: #fff; display:block; position: absolute; top: -2px; left: 0px; z-index: 4; } .rainbows .shadow { color: #000; display:block; position: absolute; opacity: 0.5; filter:alpha(opacity=50); top: 2px; left: 2px; z-index: 3; }.rainbows{position:relative;display:block;}

.rainbow {

background: transparent;

display: block;

position: relative;

height: 1px;

overflow: hidden;

z-index: 5;

}

.rainbow span {

position: absolute;

display: block;

top: 0;

left: 0px;

}

.rainbows .highlight {

color: #fff;

display:block;

position: absolute;

top: -2px;

left: 0px;

z-index: 4;

}

.rainbows .shadow {

color: #000;

display:block;

position: absolute;

opacity: 0.5;

filter:alpha(opacity=50);

top: 2px;

left: 2px;

z-index: 3;

}

这里主要说明下highlight和shadow这两个class的意义，其实从字面也基本可以理解，这两个class是为了增加字体的立体性而设定，一个是白色的高亮，一个是黑色阴影。

JS部分：

复制代码 代码如下:

function initGradients(s) { $(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('' + html + '') } cacheHTML.push('' + html + '','' + html + ''); $(cacheHTML.join('')).appendTo(this) }) }) } //这个部分就是调用了，传入要添加效果的元素，这里可以是jquery的任意选择符。 initGradients('.rainbows'); function initGradients(s) {

$(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('' + html + '')

}

cacheHTML.push('' + html + '','' + html + '');

$(cacheHTML.join('')).appendTo(this)

})

})

}

//这个部分就是调用了，传入要添加效果的元素，这里可以是jquery的任意选择符。

initGradients('.rainbows');

代码看起来并不算多，但是如果想明白原理的话还是要认真的理解下这个代码的。

结合JS/CSS我们可以看出其大概的思路如下：

程序首先算出字体所在容器的高度N，然后清空容器内容，并添加N个span，每个span内容都为原容器的文字，每个span的颜色根据渐变色进行计算，而且其中的文字定位都相比之前一个span的文字向上偏移一个像素。CSS中可以看到，每个span的高度都为1。这样，我们就通过N各不同颜色的1px的span把字体“拼”出来了，然后加上“高光/阴影”就搞定。

基于jQuery的立体文字渐变效果相关阅读:

oralce数据库DMP导入导出实例

Novell:Linux桌面应用普及仍需3-5年时间

MYSQL教程:MYSQL列类型(column type)

CSS+XHTML制作的简单网页下拉菜单

在ACCESS中自动压缩当前数据库

日志操作模式，Oracle数据的保护伞

Man指令调用帮助文件来源和语法关键字

理解认识阿里妈妈淘客系统对外接口通用规范

PHP源码之 ext/mysql扩展部分

用JS得到字符串中出现次数最多的字母

MySQL进阶SELECT语法篇

jQuery 学习第六课 实现一个Ajax的TreeView

利用ASP.NET MVC源代码调试你的应用程序

CSS样式按整洁易懂的结构组织