搜索:
首页 >> JavaScript >> Javascript特效 >> 基于jQuery实现的立体文字渐变效果

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

2009-5-18 作者:yemoo 来源:yemoo博客 投递文章

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

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

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

演示DEMO:Gradient-text.htm (源码请另存为)

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

HTML代码:

<span class="rainbows">© 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; 
}

这里主要说明下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'); 

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

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

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

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

Tags:jquery  文字  渐变  特效  立体 
相关文章
手机版 Javascript特效 Asp之家 Aspxhome.com
闽ICP备06017341号