使用jQuery插件realshadow实现超酷真实阴影效果

在线演示  本地下载

大家有没有尝试使用纯CSS和Javascript来生成带有颜色的元素阴影？如果你也想生成这样超酷的特效的话，大家可以尝试使用这个jQuery插件： real shadow。

使用这个简单的插件，你可以迅速给页面上的特定元素添加阴影效果，最酷的地方在于随着你的鼠标位置，阴影会对应改变的哦！

如何使用？

这个插件的使用非常简答，你只需要倒入jQuery和插件类库，如下：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/realshadow.js"></script>

然后，使用如下代码：

$('#element').realshadow({
});

即可搞定！是不是很简答？

相关插件参数

这个插件拥有几个简单的选项可以帮助你自定义，如下：

• followMouse：缺省为false，指定阴影是否跟随鼠标移动变化
• pageX：用来产生阴影的光源x坐标 
• pageY：用来产生阴影的光源y坐标 
• c：阴影颜色定义，包括r, g, b

如果你需要给不同的元素指定颜色，你可以使用如下方法：

<span rel="r"></span>
<span rel="g"></span>
<span rel="b"></span>
<span rel="rg"></span>
<span rel="gb"></span>
<span rel="br"></span>
<span rel="rgb"></span>

以上代码中我们使用rel来定义对应元素的阴影颜色。

下面是我们的在线演示的完整代码。

HTML代码

<ul id="container">
    <li data-tag="Ducati" rel="c"><strong>Hypermotard 796 Silver</strong><img src="img/motor/Model-Page_2012_Hypermotard_796_298.jpg"><span> Ducati</span></lspan>
    <li data-tag="Ducati" rel="r"><strong>Hypermotard 796 Red</strong><img src="img/motor/HM-796_2001_R_[298x168].jpg"><span> Ducati</span></lspan>
    <li data-tag="Ducati" rel="r"><strong>Hypermotard 1100 Evo Red</strong><img src="img/motor/2012-Ducati-Hypermotard-1100EVO4-298.jpg"><span> Ducati</span></lspan>
    <li data-tag="Ducati" rel="r"><strong>Streetfighter 848</strong><img src="img/motor/Color_SF-848_R_NC_298x168.jpg"><span> Ducati</span></lspan>
    <li data-tag="Ducati" rel="c"><strong>Diavel Carbon</strong><img src="img/motor/Model-Page_2012_Hypermotard_796_298.jpg"><span> Ducati</span></lspan>
    <li data-tag="BMW" rel="b"><strong>BMW K1300S HP</strong><img src="img/motor/2012-BMW-K1300SHPb-298x168.jpg"><span> BMW</span></lspan>
    <li data-tag="BMW" rel="cr"><strong>2012 BMW G650GS</strong><img src="img/motor/2012-BMW-G650GSd-298x168.jpg"><span> BMW</span></lspan>
    <li data-tag="Beneli" rel="gb"><strong>Tre-K 1130 Amazonas</strong><img src="img/motor/2012-Benelli-TreK1130Amazonas1-298x168.jpg"><span> Beneli</span></lspan>
    <li data-tag="KTM" rel="r"><strong>2012 KTM 1190 RC8R</strong><img src="img/motor/2012-KTM-1190RC8R4-298x168.jpg"><span> KTM</span></lspan>
</ul>

以上定义了需要添加阴影的li元素。

Javascript代码

$(function() {
    $('#container li').realshadow({
    });    
});

我们使用缺省的选项值来生成阴影。

是不是非常酷，大家可以将这个特效应用到用户的登录页面，绝对会让你的用户对你的网站过目不忘的，希望大家喜欢，如果你有建议和问题，请给我们留言，谢谢！