超酷jQuery水波倒影特效插件

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

 28534  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:水波的数量。


相关插件-动画效果

可爱的3D角色动画

可爱的3D人物动画,视线跟随鼠标移动,可拖动旋转。
  动画效果
 25767  266

图片酷炫粒子动画效果

学习es6顺便写的 使用canvas粒子化图片 利用easying.js里面的公式计算粒子动态轨迹方程 x轴方向和y轴方向的公式均可以选择 可以设置粒子运动时间档
  动画效果
 53139  486

jQuery飘落的枫叶

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

步骤填写表单

美观的填写表单界面
  动画效果
 47018  411

讨论这个项目(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
        我也觉得
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复