tyygming 发表于 2013-1-29 13:32:51

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

日期：2012-5-4  来源：GBin1.com
http://www.gbin1.com/technology/jquerytutorial/20120504super-cool-by-realshadow/title.jpg
在线演示  本地下载
大家有没有尝试使用纯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_.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元素。
....
来源：使用jQuery插件realshadow实现超酷真实阴影效果
 
页: [1]
查看完整版本: 使用jQuery插件realshadow实现超酷真实阴影效果