JQuery 文字阴影

2009年7月11日吉光片羽 0

或许你并不陌生，用CSS滤镜可以实现很多种文字效果。可那是IE的玩意，FF可不在乎。当然，在不久的将来，你可以让支持标准的浏览器使用 text-shadow 来实现阴影文字效果。但现在，要想让大伙都来凑文字阴影的热闹，似乎有点困难。怎么办呢？记住，我们有万能的JQuery！当然，如果你愿意用更啰嗦的原生JS去写，也是没问题的，只怕是很多人都不一定能轻松上手罢。

首先，我们来展开思路。要出现阴影文字，就有文字一层，和阴影一层，而阴影就该是在文字的下层，并偏移几个像素，从视觉上出现阴影的效果。这就需要将文字拷贝一份，并放到同一个元素里，然后通过绝对定位来实现位置的便宜，以及层叠位置。
我们先来看看html：

<div class="title">我是一个标题</div>

接着拷贝一份：

$(".title").append($(".title").clone().addClass("copy"));

下来定义样式：

.title{ font:bold 30px Arial; /*设置字体格式*/ color:#000; /*用黑色*/ position:relative; /*设置相对位置，保证其子层能相对其绝对定位*/ } .copy{ position:absolute; /*使用绝对定位*/ top:1px; /*向下偏移1像素*/ left:1px; /*向左偏移1像素*/ z-index:-1; /*让其在.title的下一层*/ color:#999; /*相当于阴影的灰色*/ }

最后，重整以后，来看看最终效果吧！

HTML :\ Ctrl+A 全部选择提示：你可先修改部分代码，再按运行运行此代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JQeury 凹凸文字</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div{font:bold 30px Arial} .title{color:#000;position:relative;} .copy{color:#999;position:absolute;top:1px;left:1px;z-index:-1} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".title").append($(".title").clone().toggleClass("copy")); }) </script> </head> <body> <div class="title">使用了阴影效果的：我是一个标题</div> <br /> <div>未使用阴影效果的：我是一个标题</div> <br /> <button onclick="window.location.reload()">点此刷新查看效果</button> <br /><br /> <p>© <a href="http://www.jgpy.cn" target="_blank">吉光片羽</a> 出品</p> </body> </html>

注：运行代码可能不能实时看到效果，请点击刷新按钮以重载页面查看效果！

接下来，问题出现了，如果页面里每个标题都要用到阴影文字呢？这当然不用担心，加个.each()吧：

$(".title").each(function(){ $(this).append($(this).clone().addClass("copy"));

记着把".title"换成你需要使用阴影文字的ID或CLASS就好了，还不要忘了定义CSS样式！赶紧动手试试，做出你自己个性的文字阴影吧！

© 版权声明：

本文为吉光片羽原创，遵循知识共享许可协议，转载（全文或部分文字）请务必注明作者：吉光片羽，及本文地址。谢谢合作！
文中所引用的部分图片或文字等资源版权归原作者所有，如果侵犯了您的权益，请在下方评论提出，我会尽快处理。

★吉光片羽是壹穜風格★

Web Front-end Developer & Freelance Designer