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实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
Jquery解析json数据详解
Dec 26 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
vue-ajax小封装实例
Sep 18 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 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解析URL函数parse_url和parse_str
2014/11/11 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
django接入新浪微博OAuth的方法
2015/06/29 Python
Python实现的rsa加密算法详解
2018/01/24 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
工商学院毕业生自荐信
2013/11/12 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
旅游文化节策划方案
2014/06/06 职场文书
北大自主招生自荐信
2015/03/04 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS