超酷jQuery水波倒影特效插件

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

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


相关插件-动画效果

背景彩带动画插件ribbon.js

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

CSS3提交按钮动画特效

这个提交按钮效果有两组动画:当屏幕大于800px的时候是一个动画效果,当屏幕小于800像素的时候是另一种动画效果。缩放你的浏览器看看不同的提交按钮动画效果吧!
  动画效果
 45293  428

CSS3模仿四季交替动画

HTML5 CSS3卡通风格一年四季交替动画特效
  动画效果
 32893  443

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

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

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