首頁 > web前端 > html教學 > 超酷jQuery水波倒影特效插件

超酷jQuery水波倒影特效插件

黄舟
發布: 2017-01-18 14:27:30
原創
1594 人瀏覽過

簡要教學

lake.js是一款可以製作水波倒影特效jQuery插件。此jquery外掛程式可將任何圖片轉換為canvas組件,使圖片產生逼真的水波倒影效果。

使用方法

在頁面中引入jquery和lake.js檔案。

<script src="path/to/jquery.min.js"></script>                  
<script src="path/to/lake.js"></script>
登入後複製

 HTML結構

可以為任何圖片製作水波倒影效果。

<img id="lake-img" src="lake.png" style="display: none;"/>
登入後複製

初始化外掛

在頁面DOM元素載入完畢之後,可以透過下面的方法來初始化該jquery水波倒影外掛。

$(function() {
  $(&#39;#lake-img&#39;).lake({
    &#39;speed&#39;: 1,
    &#39;scale&#39;: 0.5,
    &#39;waves&#39;: 10
  });
});
登入後複製

配置參數

此jquery水波倒影插件有3個可用的設定參數:

  • speed:水波運動的速度。

  • scale:水波波峰的高低。

  • waves:水波的數量。

以上就是超酷jQuery水波倒影特效插件的內容,更多相關內容請關注PHP中文網(www.php.cn)!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板