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 相关文章推荐
Javascript remove 自定义数组删除方法
Oct 20 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
layer 关闭指定弹出层的例子
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
一个多文件上传的例子(原创)
2006/10/09 PHP
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
python 接口_从协议到抽象基类详解
2017/08/24 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
Python地图绘制实操详解
2019/03/04 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
介绍一下Linux中的链接
2016/06/05 面试题
自考生自我评价分享
2014/01/18 职场文书
个性与发展自我评价
2014/02/11 职场文书
学生安全责任书
2014/04/15 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
校长一岗双责责任书
2015/05/09 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL