超酷jQuery水波倒影特效插件

所属分类:其他-动画效果

 29367  351  查看评论 (8)
分享到微信朋友圈
X
超酷jQuery水波倒影特效插件 ie兼容11

注:需要在服务端预览,本地预览会有跨域问题!

简要教程

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() {
  $('#lake-img').lake({
    'speed': 1,
    'scale': 0.5,
    'waves': 10
  });
});

配置参数

该jquery水波倒影插件有3个可用的配置参数:

  • speed:水波运动的速度。

  • scale:水波波峰的高低。

  • waves:水波的数量。


相关插件-动画效果

按钮点击水波纹效果插件ripple.js

轻量级按钮点击水波纹效果,支持所有块级标签,使用非常简单。
  动画效果
 47563  528

canvas 雨滴

这款动画主要是模拟了下雨的场景,雨滴从空中飘落,落在地上溅起水花,整个过程模拟得相当逼真。更重要的是,这款HTML5下雨动画还可以通过鼠标控制风向和雨水强度,鼠标左右滑动控制雨滴方向,鼠标上下滑动控制雨滴密度。
  动画效果
 28943  419

jQuery飘落的枫叶

枫叶一片一片又一片,此时最相思,代码简单方便调用
  动画效果
 31117  363

背景彩带动画插件ribbon.js

只有1kb的javascript 可以使用 HTML5 画布在您的网站上生成背景彩带动画
  动画效果
 36390  409

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    就酱 0
    2019/5/20 11:20:29
    只有火狐可以看到效果 回复
    LU lu ! 0
    2017/10/27 16:07:46

    为啥只支持火狐浏览器/??

    回复
    爱拼才会赢 0
    2017/9/27 21:32:19
    =,= 0
    2017/4/18 13:18:31
    Lost 0
    2016/11/10 11:11:15
    放到服务器没用成功 lake.js老报错 回复
    山丘的彼方 0
    2016/11/10 10:11:03
    想当年 这种效果还需要用flash做呢 回复
    明月半倚深秋 0
    2016/11/10 8:11:06
    感觉蛮厉害的
        人生若只如初见0
        2019/5/30 17:07:02
        我也觉得
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复