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


Posted in Javascript onMay 17, 2010

先截两个图看看:

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

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

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

在线演示 http://demo.3water.com/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的立体文字渐变效果

Javascript 相关文章推荐
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
JS之相等操作符详解
Sep 13 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
layui使用label标签的方法
Sep 14 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
jQuery实现的类flash菜单效果代码
May 17 #Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 #Javascript
JQuery select标签操作代码段
May 16 #Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 #Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 #Javascript
WEB 浏览器兼容 推荐收藏
May 14 #Javascript
js 数值项目的格式化函数代码
May 14 #Javascript
You might like
PHP 类型转换函数intval
2009/06/20 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
再谈JavaScript线程
2015/07/10 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
python数据处理实战(必看篇)
2017/06/11 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
C语言基础笔试题
2013/04/27 面试题
学期研究性学习个人的自我评价
2014/01/09 职场文书
借款协议书
2014/04/12 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
学历证明样本
2015/06/16 职场文书
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫