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代码
Mar 06 Javascript
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
javascript实现日期格式转换
Dec 16 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
JS截取字符串实例详解
Nov 24 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
js实现简易拖拽的示例
Oct 26 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 Javascript
JS数组的常用方法整理
Mar 31 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目录操作函数之获取目录与文件的类型
2010/12/29 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
一些常用的Javascript函数
2006/12/22 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
pandas实现导出数据的四种方式
2020/12/13 Python
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
Internet体系结构
2014/12/21 面试题
党课知识竞赛主持词
2014/04/01 职场文书
公司建议书怎么写
2014/05/15 职场文书
诚信贷款承诺书
2014/05/30 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏
python运算符之与用户交互
2022/04/13 Python