在線演示 本地下載

大家有沒(méi)有嘗試使用純CSS和Javascript來(lái)生成帶有顏色的元素陰影？如果你也想生成這樣超酷的特效的話，大家可以嘗試使用這個(gè)jQuery插件： real shadow 。

使用這個(gè)簡(jiǎn)單的插件，你可以迅速給頁(yè)面上的特定元素添加陰影效果，最酷的地方在于隨著你的鼠標(biāo)位置，陰影會(huì)對(duì)應(yīng)改變的哦！

如何使用？

這個(gè)插件的使用非常簡(jiǎn)答，你只需要倒入jQuery和插件類庫(kù)，如下：

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

然后，使用如下代碼：

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

即可搞定！是不是很簡(jiǎn)答？

相關(guān)插件參數(shù)

這個(gè)插件擁有幾個(gè)簡(jiǎn)單的選項(xiàng)可以幫助你自定義，如下：

• followMouse：缺省為false，指定陰影是否跟隨鼠標(biāo)移動(dòng)變化
• pageX：用來(lái)產(chǎn)生陰影的光源x坐標(biāo)
• pageY：用來(lái)產(chǎn)生陰影的光源y坐標(biāo)
• 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來(lái)定義對(duì)應(yīng)元素的陰影顏色。

下面是我們的在線演示的完整代碼。

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({
 }); 
});
  

我們使用缺省的選項(xiàng)值來(lái)生成陰影。

是不是非常酷，大家可以將這個(gè)特效應(yīng)用到用戶的登錄頁(yè)面，絕對(duì)會(huì)讓你的用戶對(duì)你的網(wǎng)站過(guò)目不忘的，希望大家喜歡，如果你有建議和問(wèn)題，請(qǐng)給我們留言，謝謝！

來(lái)源： 使用jQuery插件realshadow實(shí)現(xiàn)超酷真實(shí)陰影效果

使用jQuery插件realshadow實(shí)現(xiàn)超酷真實(shí)陰影效果