使用到的工具：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. Ettercap进行arp毒化

    攻击者IP:192.168.220.152 受害者IP:192.168.220.151 网关:192.168.220.2 修改DNS文件 ┌─[root@sch01ar]─[~] └──╼ #vim ...

  2. DLL 演示

    编写DLL时的函数与一般的函数方法基本一样.但要对库中的函数进行必要的声明,以说明哪些函数是可以导出的,哪些函数是不可以导出的. 把DLL中的函数声明为导出函数的方法有两种: 一是使用关键字_decl ...

  3. python使用pyodbc连接sql server 2008

    一.PyODBC的下载地址: http://code.google.com/p/pyodbc/ 二.测试语句 import pyodbccnxn = pyodbc.connect(DRIVER='{S ...

  4. LNMP 1.6 常见的502问题解决

    在nginx上跑discuz,先修改配置文件 cd /usr/local/nginx/conf/vhosts/ vim test.conf server { listen ; server_name ...

  5. WebRTC的拥塞控制技术<转>

    转载地址:http://www.jianshu.com/p/9061b6d0a901 1. 概述 对于共享网络资源的各类应用来说,拥塞控制技术的使用有利于提高带宽利用率,同时也使得终端用户在使用网络时 ...

  6. python之简单的函数介绍（http://docs.python.org/3/library）

    Python不但能非常灵活地定义函数,而且本身内置了很多有用的函数,可以直接调用. 在上面的网站上我们可以进行查询,Python具体都有哪些函数. 我们也可以再交互命令行中来查找函数: >> ...

  7. Linux之Ubuntu环境配置（一）

    Linux下的搜狗输入法安装: 1.搜狗官网下载Linux64bit版本文件,默认在/home/username/Downloads目录下. 2.cd /home/username/Downloads ...

  8. LaTex: 表格单元格内容 分行显示/换行

    问题:如何同时让表格同一行一个单元格的文字能垂直居中?比如说文字超长超出页面范围需要分行显示 答:(来源于smth) 方案一: \newcommand{\tabincell}[2]{\begin{ta ...

  9. sharepoint文档库中日期显示详细日期，不显示几天前

    文档库---库设置----栏

  10. ROS探索总结(一)——ROS简介

    转自古-月 ROS探索总结(一)——ROS简介 一.历史 随着机器人领域的快速发展和复杂化,代码的复用性和模块化的需求原来越强烈,而已有的开源机器人系统又不能很好的适应需求.2010年Willow G ...