基于jQuery实现的立体文字渐变效果
作者:yemoo 来源:yemoo博客 发布时间:2009-05-18 19:15:00
今天看到某人博客推荐了http://dragoninteractive.com/这个网站,貌似一些效果做的比较不错,于是打开了看看,不过还真是让我颇有收获,网站本身设计就很漂亮,里面很多效果也都很酷,而且必须要说的就是很多貌似flash的效果,其实都是通过js实现的,这些东西大大引起了我的兴趣,于是开始阅读代码,分离。
这里要说的就是网站中通过js实现的一个有立体感的文件渐变效果,先截两个图看看:
效果很不错吧?会不会误以为这些字体是图片?这可不是图片,而是用JS实现的
演示DEMO:Gradient-text.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;
}
这里主要说明下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');
代码看起来并不算多,但是如果想明白原理的话还是要认真的理解下这个代码的。
结合JS/CSS我们可以看出其大概的思路如下:
程序首先算出字体所在容器的高度N,然后清空容器内容,并添加N个span,每个span内容都为原容器的文字,每个span的颜色根据渐变色进行计算,而且其中的文字定位都相比之前一个span的文字向上偏移一个像素。CSS中可以看到,每个span的高度都为1。这样,我们就通过N各不同颜色的1px的span把字体“拼”出来了,然后加上“高光/阴影”就搞定。
本人描述能力比较差,因此如果还不太明白的,可以看看代码,这个还是比较容易理解的。
猜你喜欢
- 做项目的时候,一位同事导数据的时候,不小心把一个表中的数据全都搞重了,也就是说,这个表里所有的记录都有一条重复的。这个表的数据是千万级的,而
- 1. 服务器优化优化原则:内存里的数据要比磁盘上的数据访问起来快;站数据尽可能长时间地留在内存里能减少磁盘读写活动的工作量;让索引信息留在内
- 之前有写过一篇浏览器的tab设计,这回说说网站的tab设计。一说到tab很自然地就想到了导航、信息架构。随着网站信息结构的复杂化,选择tab
- 如果你正从你的用户那里收集信息, 没有比网页表单更简单和直接的办法了。一份有良好设计的表单可以提供有价值的信息, 相反, 他们有可能把用户吓
- alert table 表名 add column 列名 alter table 表名 drop column 列名 eg: alter t
- 运行环境:IIS脚本语言:VBScript数据库:Access/SQL Server数据库语言:SQL1.概要:不论是在论坛,还是新闻系统,
- 如何做一个全面的探测器? 我们也可以做一个功能类似的探测器,见下:<Script lan
- 提要:系统自带的mysql默认字符集不是gbk,因此给数据库的推广应用以及中文程序的开发带来极大的不便,在没完没了的GBK和UTF8的转换过
- 一、出错情况 有些时候当你重启了数据库服务,会发现有些数据库变成了正在恢复、置疑、可疑等情况,这个时候DBA就会很紧张了,下面是一些在实践中
- 我们用session来实现这一设想。由于session是用户级的全局变量,将登录的信息记录到session中后,用户就可直接浏览这些特定的页
- Dreamweaver(以下简称DW)提供了一种称为“Behavior”(行为)的机制,帮助你构建页面
- 历时半年,我独自一人完成了一个局级单位的管理信息系统,共发布BETA版29次,正式版本3次。ASP+ORACLE环境,285个ASP文件,功
- 分析当前用户下所有表的记录总数保证好用!begin dbms_utility.analyze_schema(user,'COMPUT
- 经常会遇到这样一个情况:浏览器弹出对话框,提示脚本运行时间过长,询问“停止”还是“继续”。那究竟各个浏览器是如何判断在什么时候才弹出此对话框
- 表的故障检测和修正的一般过程如下:◆ 检查出错的表。如果该表检查通过,则完成任务,否则必须修复出错的数据库表。◆ 在开始修复之前对表文件进行
- 代码如下:'******************************************** '函数名:I
- 1.1.1 摘要 Join是关系型数据库系统的重要操作之一,SQL Server中包含的常用Join:内联接、外联接和交叉联接等。如果我们想
- list.asp<%@LANGUAGE="VBSCRIPT" CODEPAGE="936&qu
- 1。在Asp页面首部<head>加入 Response.Buffer =
- IEBlog公布了开发中的Internet Explorer 8 Beta2版本的最新功能.IE8 Beta2在第一个版本的基础上做出了很大