在線演示 本地下載

大家有沒有嘗試使用純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({
 }); 
});
  

我們使用缺省的選項值來生成陰影。

是不是非常酷，大家可以將這個特效應用到用戶的登錄頁面，絕對會讓你的用戶對你的網站過目不忘的，希望大家喜歡，如果你有建議和問題，請給我們留言，謝謝！

來源： 使用jQuery插件realshadow實現超酷真實陰影效果

使用jQuery插件realshadow實現超酷真實陰影效果