為什么80%的碼農都做不了架構師？>>> ??

日期：2012-5-4??來源：GBin1.com

在線演示? 本地下載

大家有沒有嘗試使用純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元素。

....

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

轉載于:https://my.oschina.net/gbin1/blog/56101

總結

以上是生活随笔為你收集整理的使用jQuery插件realshadow实现超酷真实阴影效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。