jQuery_jquery によって実装された 3 次元テキスト グラデーション効果

2 枚の写真を見てみましょう。

効果はとても良いですよね？これらのフォントを画像と間違えませんか?これは写真ではありませんが、JS で実装されたオンライン デモです

http://demo.jb51.net/js/gradient-test/demo.htm

実装プロセスと原理を簡単に共有しましょう (Web サイトでは jquery lib が使用されています。ここでは個別に実装しません。ここで共有するのは jquery の実装方法でもあります):

HTML コード:

コードをコピー コードは次のとおりです:

© 2009 Dragon Interactive .All Rights Reserved.

コードの再利用を容易にするために、ここではどのテキストがこの特殊効果を使用するかを識別します。

CSS コード:

コードをコピー コードは次のとおりです:

.rainbows{ 位置: 相対; 表示: ブロック; 位置: 相対; 高さ: 1px; .rainbow スパン { 位置: 絶対;表示: ブロック; 左: 0px; } .rainbows .ハイライト; 位置: 絶対; 左: 0px; }シャドウ { カラー: #000; 位置: 不透明度: 0.5; 上部: 2px; 位置: 相対;表示:ブロック ;}
.rainbow {
背景:透明;
位置:相対;
オーバーフロー:非表示; -index: 5;

.rainbow スパン {
位置: 絶対;
上: 0;


.rainbows .highlight {
色: #fff;
位置: 絶対;
左: 0px; 🎜>z -index: 4;
}

.rainbows .shadow {
color: #000;
position: 絶対; 0.5;
フィルター: アルファ (不透明度 = 50);
左: 2 ピクセル;


ここでの主な説明 ハイライトとシャドウの 2 つのクラスの意味は文字通り理解できます。これら 2 つのクラスはフォントの立体感を高めるために設定されています。1 つは白いハイライトで、もう 1 つは黒いシャドウです。

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||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; innerHTML = '';
for (var i = 0; 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)
})
})
}
//この部分は调用了，传入要追加效果的要素
initGradients('.rainbows'); ここでは、jquery の任意の記号を指定できます。



コードは多数ありますが、白原則を理解する場合には、このコードも JS/CSS に準拠していることがわかります。その大まかな考え方は次のとおりです:

手順は、最初に文字が存在するコンテナの高さ N を計算し、次にコンテナの内容をクリアし、N 個のスパンを追加します。各スパンの内容はすべて元のコンテナの文字です。の色は、カラーの変更に応じて計算され、その文字位置が前のスパンの文字よりも 1 ピクセル分だけずれています。 CSS では、各スパンの高さが 1 であることがわかります。


は、jQuery の立体文字変更効果

に基づいています。