Home  >  Article  >  Web Front-end  >  Super cool jQuery water wave reflection special effect plug-in

Super cool jQuery water wave reflection special effect plug-in

黄舟
黄舟Original
2017-01-18 14:27:301530browse

Brief Tutorial

lake.js is a jQuery plug-in that can create water wave reflection special effects. This jquery plug-in can convert any picture into a canvas component, so that the picture can generate a realistic water wave reflection effect.

Usage method

Introduce jquery and lake.js files into the page.

<script src="path/to/jquery.min.js"></script>                  
<script src="path/to/lake.js"></script>

HTML structure

Can create water wave reflection effect for any picture.

<img id="lake-img" src="lake.png" style="display: none;"/>

Initialization plug-in

After the page DOM element is loaded, you can initialize the jquery water wave reflection plug-in through the following method.

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

Configuration parameters

The jquery water wave reflection plug-in has 3 available configuration parameters:

  • speed: the speed of water wave movement.

  • scale: The height of the crest of the water wave.

  • waves: The number of water waves.

The above is the content of the super cool jQuery water wave reflection special effects plug-in. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn