使用到的工具：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. 第十六章 Velocity工作原理解析（待续）

    Velocity总体架构 JJTree渲染过程解析 事件处理机制 常用优化技巧 与JSP比较 设计模式解析之合成模式 设计模式解析之解释器模式

  2. Nginx配置文件中文注释详解

    Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 Igor Sysoev ...

  3. Linux 对mysql远程授权连接操作 和 查看mysql数据库和表 基本命令

    Linux 对mysql远程连接的授权操作 首先linux连接mysql数据库 授权: grant all on *.* to ' with grant option; //允许账户root从任何主机 ...

  4. 10-30SQLserver基础--（备份和还原、分离和附加数据库）、语句查询操作

    一.数据库是一个大容量的存储数据的仓库,为了保证数据完整性,防止一些数据的意外丢失等情况,需要对数据进行备份和还原. 备份数据不影响数据库的正常运行. 1.备份.还原数据库 首先对数据库进行备份,操作 ...

  5. leetcode230

    /** * Definition for a binary tree node. * public class TreeNode { * public int val; * public TreeNo ...

  6. Shell编程进阶 1.6 if判断的几种用法

    针对文件和目录的逻辑判断 touch .txt .txt ]; then echo ok;fi -f 判断1.txt是否是文件且是否存在,成立输出ok if [-d /tmp/ ]; then ech ...

  7. C语言学习笔记--#error 、 #line 和 #pragma 的使用

    1. #error 的用法 (1)#error 是一种预编译器指示字,用于生成一个编译错误消息 (2)用法:#error message //注意:message 不需要用双引号包围 (3)#erro ...

  8. 配置镜像yum源--解决RHN not available的问题

    由于RHN服务是收费的,在安装redhat系统时,自带的yum可能不能使用.中国有很多好用的镜像源,我们可以把yum源更改到国内镜像源上,步骤如下: 一.卸载本地yum #rpm –qa|grep y ...

  9. Oracle pl/sql 基础入门语法

    PL/SQL是一种块结构的语言,这意味着PL/SQL程序被划分和编写代码的逻辑块.每块由三个子部分组成:1     声明 此部分开头使用关键字DECLARE.它是一个可选的部分,并限定在该程序中使用的 ...

  10. solr4.8中集成mmseg4j1.9.1

    要想在Solr中整合mmseg4j其实很容易,只需要如下几个步骤 1.下载(https://code.google.com/p/mmseg4j/downloads/list)并解压mmseg4j-1. ...