使用到的工具：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. redmine2.3环境搭建

    1. 安装redmine bitnami-redmine-2.3.0-0-windows-installer.exe安装到C:\BitNami\redmine-2.3.0-0目录下. 其中redmin ...

  2. Ubuntu中vi命令的使用

    指今说明: 进入 vi 的命令vi filename: 打开或新建文件,并将光标置于第一行首 vi +n filename: 打开文件,并将光标置于第n行首 vi + filename: 打开文件,并 ...

  3. javascipt——基础知识——基本数据类型和逻辑运算

    进制转换:http://www.topthink.com/topic/504.html javascript的数据类型分为基本数据类型和非基本数据类型(对象) 一.基本数据类型: 包括以下部分:数字. ...

  4. import javax.servlet 出错(真的很管用)

    Error: The import javax.servlet cannot be resolved The import javax.servlet.http.HttpServletRequest ...

  5. HADOOP HDFS BALANCER介绍及经验总结（转）

    1.集群执行balancer命令,依旧不平衡的原因是什么?该如何解决? 2.尽量不在NameNode上执行start-balancer.sh的原因是什么? 集群平衡介绍 Hadoop的HDFS集群非常 ...

  6. 获取字符串长度函数length()和hengthb()

    oracle获取字符串长度函数length()和hengthb() lengthb(string)计算string所占的字节长度:返回字符串的长度,单位是字节 length(string)计算stri ...

  7. hive删除表报错：Specified key was too long; max key length&nb

    我是在hive删除表的时候出现这个错误的,看到这个错误应该就知道是字符集错误. 但是我用​ alter database hive character set latin1; 这个命令将其改成拉丁之后 ...

  8. PLM数据库迁移注意事项

    需求: PLM应用程序与数据库是存放在同一台服务器上,现需要将数据库迁移到数据库服务器10.10.1.10中. 10.10.1.10中安装了三个实例,MSSQLSERVER.MSSQLSERVER_P ...

  9. IDEA创建Maven Web 项目

    前提:安装过maven并且配置了maven的环境变量,这里就不演示了.转载了别人一篇maven详解,不了解的可以先看一下这个 链接 图文讲解: 创建项目 选择Maven 选择创建webapp项目 指定 ...

  10. 4-5 父节点watcher事件

    三种方式设置watcher:ls.stat.get