當(dāng)前位置：首頁(yè) > 编程语言 > php >内容正文

php

php渐变字,jQuery_jQuery实现的立体文字渐变效果，先截两个图看看：效果很 - phpStudy...

發(fā)布時(shí)間：2023/12/3 php 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 php渐变字,jQuery_jQuery实现的立体文字渐变效果，先截两个图看看：效果很 - phpStudy... 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

jQuery實(shí)現(xiàn)的立體文字漸變效果

先截兩個(gè)圖看看：

效果很不錯(cuò)吧？會(huì)不會(huì)誤以為這些字體是圖片？這可不是圖片，而是用JS實(shí)現(xiàn)的

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

下面來(lái)簡(jiǎn)單分享下實(shí)現(xiàn)過(guò)程及原理(網(wǎng)站中使用了jquery這個(gè)lib，我們這里就不再自己?jiǎn)为?dú)實(shí)現(xiàn)了，我們這里分享的也是jquery的實(shí)現(xiàn)方法)：

HTML代碼：

復(fù)制代碼代碼如下:

為了便于代碼重用，我們通過(guò)class來(lái)標(biāo)識(shí)出哪些文字需要增加這個(gè)特效，這里用的是rainbows。

CSS代碼：

復(fù)制代碼代碼如下:

.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;

}

這里主要說(shuō)明下highlight和shadow這兩個(gè)class的意義，其實(shí)從字面也基本可以理解，這兩個(gè)class是為了增加字體的立體性而設(shè)定，一個(gè)是白色的高亮，一個(gè)是黑色陰影。

JS部分：

復(fù)制代碼代碼如下:

$(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)

})

}

//這個(gè)部分就是調(diào)用了，傳入要添加效果的元素，這里可以是jquery的任意選擇符。

initGradients('.rainbows');

代碼看起來(lái)并不算多，但是如果想明白原理的話還是要認(rèn)真的理解下這個(gè)代碼的。

結(jié)合JS/CSS我們可以看出其大概的思路如下：

程序首先算出字體所在容器的高度N，然后清空容器內(nèi)容，并添加N個(gè)span，每個(gè)span內(nèi)容都為原容器的文字，每個(gè)span的顏色根據(jù)漸變色進(jìn)行計(jì)算，而且其中的文字定位都相比之前一個(gè)span的文字向上偏移一個(gè)像素。CSS中可以看到，每個(gè)span的高度都為1。這樣，我們就通過(guò)N各不同顏色的1px的span把字體“拼”出來(lái)了，然后加上“高光/陰影”就搞定。

基于jQuery的立體文字漸變效果相關(guān)閱讀:

oralce數(shù)據(jù)庫(kù)DMP導(dǎo)入導(dǎo)出實(shí)例

Novell:Linux桌面應(yīng)用普及仍需3-5年時(shí)間

MYSQL教程:MYSQL列類(lèi)型(column type)

CSS+XHTML制作的簡(jiǎn)單網(wǎng)頁(yè)下拉菜單

在ACCESS中自動(dòng)壓縮當(dāng)前數(shù)據(jù)庫(kù)

日志操作模式，Oracle數(shù)據(jù)的保護(hù)傘

Man指令調(diào)用幫助文件來(lái)源和語(yǔ)法關(guān)鍵字

理解認(rèn)識(shí)阿里媽媽淘客系統(tǒng)對(duì)外接口通用規(guī)范

PHP源碼之 ext/mysql擴(kuò)展部分

用JS得到字符串中出現(xiàn)次數(shù)最多的字母

MySQL進(jìn)階SELECT語(yǔ)法篇

jQuery 學(xué)習(xí)第六課實(shí)現(xiàn)一個(gè)Ajax的TreeView

利用ASP.NET MVC源代碼調(diào)試你的應(yīng)用程序

CSS樣式按整潔易懂的結(jié)構(gòu)組織

總結(jié)

以上是生活随笔為你收集整理的php渐变字,jQuery_jQuery实现的立体文字渐变效果，先截两个图看看：效果很 - phpStudy...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：远程办公实用指南远程办公实用指南电子版
下一篇： discuz 版块导航function_

php

php渐变字,jQuery_jQuery实现的立体文字渐变效果，先截两个图看看： 效果很 - phpStudy...

總結(jié)

php渐变字,jQuery_jQuery实现的立体文字渐变效果，先截两个图看看：效果很 - phpStudy...