使用到的工具：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. [Chapter 3 Process]Practice 3.2 Including the initial parent process, how many processes are created by the program shown in Figure?

    3.2 Including the initial parent process, how many processes are created by the program shown in Fig ...

  2. 2015.11.3 RichBox改变若干文本颜色

    for(int i=1;i<rtb.Lines.Length;i++) { if(rtb.Lines[i] == rtb.Lines[i - 1]) { int bg = rtb.GetFirs ...

  3. 正则表达式 notes

    nfs 网络文件系统 存储类型:块存储,对象存储,文件存储 nfs属于文件存储 crond 分钟小时日月周 命令:绝对路径 命令是由crond解释 /bin/bash a.sh */2 * * * * ...

  4. Solaris11.1网络配置(Fixed Network)

    Solaris11的网络配置与Solaris10有很大不同,Solaris11通过network configuration profiles(NCP)来管理网络配置. Solaris11网络配置分为 ...

  5. Howto Reboot or halt Linux system in emergency (ZT)

    http://www.cyberciti.biz/tips/reboot-or-halt-linux-system-in-emergency.html Linux kernel includes ma ...

  6. 使用pip一次升级所有安装的Python包(太牛了)

    import pip from subprocess import call for dist in pip.get_installed_distributions(): call("pip ...

  7. div的作用

    <div></div>主要是用来设置涵盖一个区块为主,所谓的区块是包含一行以上的数据,所以在<div></div>的开始之前与结束后,浏览都会自动换行, ...

  8. nginx 限制solr

    server { listen 80; server_name bai.com  www.bai.com; location /solr/ { allow 192.168.0.0/24; allow ...

  9. spring整合mybatis的事物管理配置

    一.基本配置 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http:/ ...

  10. Windows安装memcached图文教程（转）

    一.下载Memercached For Windows 二.安装步骤 1.解压到指定目录,如:C:\Memcached\memcached-win32-1.4.4-14. 2.用cmd打开命令窗口,转 ...