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

Super cool jQuery water wave reflection special effect plug-in

黄舟
Release: 2017-01-18 14:27:30
Original
1593 people have browsed it

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>
Copy after login

HTML structure

Can create water wave reflection effect for any picture.

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

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
  });
});
Copy after login

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)!


Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template