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

superadmin

今天看到某人博客推荐了http://dragoninteractive.com/这个网站，貌似一些效果做的比较不错，于是打开了看看，不过还真是让我颇有收获，网站本身设计就很漂亮，里面很多效果也都很酷，而且必须要说的就是很多貌似flash的效果，其实都是通过js实现的，这些东西大大引起了我的兴趣，于是开始阅读代码，分离。

这里要说的就是网站中通过js实现的一个有立体感的文字渐变效果，先截两个图看看：





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

这里有我做的一个DEMO：http://www.ajaxbbs.net/test/Gradient-text/index.html

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

HTML代码：
<span class="rainbows">&copy; 2009 Dragon Interactive. All Rights Reserved.</span>

为了便于代码重用，我们通过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('<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'); 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('<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把字体“拼”出来了，然后加上“高光/阴影”就搞定。


本人描述能力比较差，因此如果还不太明白的，可以看看代码，这个还是比较容易理解的。