jQuery_jquery로 구현된 3차원 텍스트 그라데이션 효과

두 장의 사진을 살펴보겠습니다.

효과가 아주 좋죠? 이 글꼴을 이미지로 착각하시겠습니까? 사진은 아니고 JS로 구현한 온라인 데모

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

구현 과정과 원리를 간략하게 공유해보겠습니다. (웹사이트에서는 jquery lib가 사용되며 여기서는 별도로 구현하지 않겠습니다. 여기서 공유하는 내용도 jquery의 구현 방법입니다.):

HTML 코드:

코드 복사 코드는 다음과 같습니다.

© 2009 Dragon Interactive . All Rights Reserved.

여기에서는 코드 재사용을 용이하게 하기 위해 클래스를 사용하여 이 특수 효과를 추가해야 합니다.

CSS 코드:

코드 복사 코드는 다음과 같습니다.

.rainbows{ 위치: 상대; 디스플레이: 블록; 위치: 상대 높이: 1px; } .rainbow 범위: 절대; 디스플레이: 블록 ; 왼쪽: 0px; .rainbows .highlight: #fff; 위치: 절대: -2px; .rainbows 그림자 { 색상: #000; 위치: 절대값: 0.5; 필터: 알파(불투명도=50); 왼쪽: 2px; 디스플레이:블록 ;}
.rainbow {
배경: 투명;
위치: 상대;
오버플로: 숨김; -색인: 5;

.rainbow 범위 {
위치: 절대;
표시: 블록
왼쪽: 0px; }

.rainbows .highlight {
색상: #fff;
위치: 절대
왼쪽: 0px; 🎜>z -색인: 4;
}

.rainbows .shadow {
색상:
표시:블록;
불투명도: 0.5;
필터:알파(불투명도=50);
상단: 2px;
왼쪽: 2px;
}


여기의 주요 지침은 하이라이트와 그림자 두 클래스의 의미를 문자 그대로 이해하면 됩니다. 이 두 클래스는 글꼴의 입체감을 높이기 위해 설정되는 클래스입니다. 하나는 흰색 하이라이트이고 다른 하나는 검은 그림자입니다.

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 = 구문 분석(from.substring(5, 7), 16), tR = 구문 분석(to.substring(1, 3), 16), tG = 구문 분석(to.substring(3, 5), 16), tB = parsInt(to.substring(5, 7), 16); var h = $(this).height() * 1.5; var html,cacheHTML=[]; this.initHTML||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); 캐시HTML.push('' html '') } 캐시HTML.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 < 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)
})
})
}
//这个part分就是调用了，传入要添加效果의 元素，这里可以是jquery는 매우 의미있는 내용입니다.
initGradients('.rainbows');

대단한 설명과 함께 JS/CSS를 결합합니다. 나는 们可以看출其大概的思路如下：


程序首先算流字体所在容器的高容容器内容，并添加N个span，每个span内容city为하라容器의 문자, 每个span的颜color根据渐变color进行计算，而且其中的文字定位書个个个span的文字向上偏移一个image素。CSS中可以看到，每个span计看到，每个span高御到为1。这样，我们就通过N各不同(이불동) 1px의 색상이 1px인 범위를 “拼”으로 설정합니다. , 然后加上은 “高光/阴影”입니다.


基于jQuery의 立体文字 渐变效果