DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery實現的立體文字漸變效果
jQuery實現的立體文字漸變效果
編輯:JQuery特效代碼     
先截兩個圖看看:

效果很不錯吧?會不會誤以為這些字體是圖片?這可不是圖片,而是用JS實現的

在線演示 http://demo.jb51.net/js/gradient-test/demo.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; }.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把字體“拼”出來了,然後加上“高光/陰影”就搞定。

基於jQuery的立體文字漸變效果

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved