介绍一个jquery文字阴影插件CSS-3 Text-Shadow
之前在王国峰的博客中，有一篇文章是分享基于jquery的各种文字特效的文章，名叫《16个金典的jquery文字特效》,那里有几个特效还是挺好的，有兴趣可以去看看。但我觉得用的最多的jquery文字阴影特效貌似提得不多，很多时候我们需要对文字做一些阴影特效，当然，在firefox和chrome中我们可以非常方便的设置文字阴影，但IE就要用CSS滤镜了，然而为了统一方便的实现文字阴影特效，我们索性用jquery来实现这一效果，省的要为不同浏览器写不同的CSS代码，很烦。
好吧，说到这里，就请出今天的主角吧，他是一款比较轻量级的jquery文字投影插件叫CSS-3 Text-Shadow，使用之前先来看看几张效果图吧。
该项目的主页地址：http://www.hintzmann.dk/testcenter/js/jquery/textshadow/
下面我简单介绍下这个文字阴影插件的使用方法吧。
1、当然先要在页面上引入jquery主库和jquery.textshadow.js 脚本库，具体就不讲了，你懂的。
2、为你要实现阴影效果的文字加上CSS属性，如要为H1文字加阴影特效，那么CSS代码如下：
h1 {
text-shadow: 2px 2px 2px #999;
}当然，这个属性IE是不支持的，但是别担心，下面就可以用这个插件来实现了
3、调用textShadow()来实现上面定义的阴影CSS，注意，这个需要在DOM加载完成才可以调用，代码如下：
$(document).ready(function(){
$("h1").textShadow();
})当然，你也可以定义一个options参数来重载第2步定义的阴影CSS参数，然后在调用textShadow的时候把options参数传递进去，代码如下：var option = {
x: 1,
y: 2,
radius: 3,
color: "#ccff00"
}
$("h1").textShadow( option );如果要移除文字的阴影效果，可以调用textShadowRemove()来实现。
是吧，很简单，短短的几行代码就可以帮助你实现兼容各种版本浏览器的jquery文字阴影效果，如果你喜欢，可以把本文分享给你的同事或者朋友，帮助他们简化繁琐的开发。
如果你要转载，也可以，不过请注明出处和原文链接，谢谢合作！
Posted by
jQuery小子 @
2011-11-7 14:04:43
阅读(632)
评论(0)
上一篇：基于jquery的即时新闻展示插件jQuery News Ticker使用介绍
下一篇：jQuery实现页面图片等比例放大和缩小
上一篇：基于jquery的即时新闻展示插件jQuery News Ticker使用介绍
下一篇：jQuery实现页面图片等比例放大和缩小
我也来参与讨论
你还可以输入600/600个字符
发表评论