使用到的工具：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. MyBatis基于注解----增删改查

    select sysdate from dual; --账户表 --账户编号,账户卡号,账户密码,账户余额,账户状态,创建时间 drop table account; create table acc ...

  2. PDM中列举所有含取值范围、正则表达式约束的字段

    Option   Explicit ValidationMode   =   True InteractiveMode =   im_Batch Dim   mdl   '当前model '获取当前活 ...

  3. oracle——基础知识（二）未完

    1.select 查询 单独的一条 select 语句 可以一次查询多条记录:但是在 pl/sql 块中,select语句只能 使用INTO子句:必须并且只能返回一行 2.EXECUTE IMMEDI ...

  4. leetcode429

    这道题目是属于树的层次遍历,使用两层的队列非空判断. class Solution { public: vector<vector<int>> levelOrder(Node* ...

  5. leetcode328

    /** * Definition for singly-linked list. * public class ListNode { * public int val; * public ListNo ...

  6. Vue基础汇总

    1)双向绑定: <div id="app"> <p>{{message}}</p> <input v-model="messag ...

  7. CentOS6.5 增加交换空间

    在CentOS 6.5安装Oracle 11g的时候,提示交换空间不足,百度来下,找到来增加交换空间的方法,特此记录一下 增加交换空间有两种方法: 严格的说,在系统安装完后只有一种方法可以增加swap ...

  8. js语法和数据类型

    基础知识(Basics) JavaScript 的很多语法借鉴自 Java,但也受 Awk,Perl 和 Python 影响. JavaScript 是大小写敏感的,使用 Unicode 字符集. 在 ...

  9. 动态参数 名称空间 作用域 作用域链 加载顺序 函数的嵌套 global nonlocal 等的用法总结

    03,动态参数 *args,**kwargs # 用户传入到函数中的实参数量不定时,或者是为了以后拓展,# 此时要用到动态参数*args,**kwargs(万能参数.)# *args接收的是所有的位置 ...

  10. 205. Isomorphic Strings两个数组变形记，是否符合规则

    ［抄题］: Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the ...