使用到的工具：jQuery Ripples Plugin

$(function() {

$('.pool').ripples({

	  resolution: 512,

	  dropRadius: 20,

	  perturbance: 1,

	});

});

点击查看效果

需要注意的是

  • 该工具不能用在移动端上
  • 该工具只能作用在有背景图片的元素中

使用js实现水波效果的更多相关文章

  1. canvas三角函数模拟水波效果

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  2. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  3. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  4. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  6. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  7. iOS 水波效果

    将水波效果放在子视图上,主控制器只负责加载 #import "WaveProgress.h" @interface WaveProgress () @property (nonat ...

  8. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  9. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

随机推荐

  1. SpringMVC---依赖注入与面向切面

    1.依赖注入与面向切面 1.1.出现背景 ——如何简化java开发? 其中很重要的一点是“组件化”. ——如何更好的“组件化”? 松耦合,以及尽可能的让组件专注于本身. ——Spring框架的目的也只 ...

  2. 调试json

    console.log("======================") // 转对象 //var obj = eval('(' + data + ')'); // 转对象 // ...

  3. Python中str.format()字典及list传入详解

  4. hibernate Annotation 以及注解版的数据关联

    目的是不写xxx.hbm.xml映射文件,使用注解 主配置文件还是要有hibernate.cfg.xml <?xml version="1.0" encoding=" ...

  5. Solaris Tips: Repairing the Boot Archive (ZT)

    http://www.seedsofgenius.net/solaris/solaris-tips-repairing-the-boot-archive 注意以下是系统盘非镜像情况下的操作,如果系统盘 ...

  6. Hive UDF开发 第一个例子

    package udf; import org.apache.hadoop.hive.ql.exec.UDF; public class helloudf extends UDF{ public St ...

  7. appium如何连接模拟器代码实例

    from appium import webdriver def connect(self): self.desired_caps = {} self.desired_caps['platformNa ...

  8. warning: control reaches end of non-void function 和 warning: implicit declaration of function 'rsgClearColor' is invalid in C99

    用gcc编译一个程序的时候出现这样的警告: warning: control reaches end of non-void function 它的意思是:控制到达非void函数的结尾.就是说你的一些 ...

  9. setAttribute这个方法

    setAttribute这个方法,在JSP内置对象session和request都有这个方法,这个方法作用就是保存数据,然后还可以用getAttribute方法来取出.比如现在又个User对象,Use ...

  10. js闭包（三）

    场景一:采用函数引用方式的setTimeout调用 闭包的一个通常的用法是为一个在某一函数执行前先执行的函数提供参数.例如,在web环境中,一个函数作为setTimeout函数调用的第一个参数,是一种 ...