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 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
checkbox 多选框 联动实现代码
Oct 22 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
做一个有下拉功能的留言版
2006/10/09 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
json对象转字符串如何实现
2012/12/02 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
Python 正则表达式(转义问题)
2014/12/15 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
python进行两个表格对比的方法
2018/06/27 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
网页设计个人找工作求职信
2013/11/28 职场文书
新学期班主任寄语
2014/01/18 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
销售类求职信
2014/06/13 职场文书
经典禁毒标语
2014/06/16 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android
JavaScript实现音乐播放器
2022/08/14 Javascript