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 Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
javascript实现微信分享
Dec 23 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 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 使用array函数实现分页
2015/02/13 PHP
浅谈json_encode用法
2015/03/05 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python socket 超时设置 errno 10054
2014/07/01 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
大学四年的个人自我评价
2014/01/14 职场文书
出国留学经济担保书
2014/04/01 职场文书
离婚协议书范文2015
2015/01/26 职场文书
工商局个人工作总结
2015/03/03 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
2019 入党申请书范文
2019/07/10 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL