使用js实现水波效果
使用到的工具：jQuery Ripples Plugin
- 下载安装
git clone https://github.com/sirxemic/jquery.ripples.git - 引入jquery，jquery.ripples/jquery.ripples.js到html中
- 使用以下脚本启动和控制水波效果
$(function() {
$('.pool').ripples({
resolution: 512,
dropRadius: 20,
perturbance: 1,
});
});
点击查看效果
需要注意的是
- 该工具不能用在移动端上
- 该工具只能作用在有背景图片的元素中
使用js实现水波效果的更多相关文章
- canvas三角函数模拟水波效果
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- iOS 水波效果
将水波效果放在子视图上,主控制器只负责加载 #import "WaveProgress.h" @interface WaveProgress () @property (nonat ...
- 使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
- js弹窗登录效果(源码)--web前端
1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
随机推荐
- 第十一章 Tomcat的系统架构与设计模式（待续）
Tomcat总体设计 Tomcat中的设计模式
- Windows安装mysql 5.7.*.zip步骤
1.去官网上下载.zip格式的文件. 2.解压到一个文件夹,这里我用D:\MySql表示 3.在D:\MySql\mysql-5.7.17-winx64下新建my.ini配置文件 黄色背景色的地方需要 ...
- ORACLE——日期时间格式化参数详解 之三
2.20 Y,YYY 返回有逗号分隔显示的年 SQL> select to_char(SYSTIMESTAMP,'Y,YYY') from dual; TO_CHAR(SYSTIMESTAMP, ...
- javascript 中的JSON.stringify - 将对象和数组转换为json格式(来源于网络)
JSON.stringify 函数 (JavaScript) 将 JavaScript 值转换为 JavaScript 对象表示法 (Json) 字符串. JSON.stringi ...
- Android 音频播放分析笔记
AudioTrack是Android中比较偏底层的用来播放音频的接口,它主要被用来播放PCM音频数据,和MediaPlayer不同,它不涉及到文件解析和解码等复杂的流程,比较适合通过它来分析Andro ...
- C获取当前时间
#include <stdio.h> #include <time.h> #include <string> #include <windows.h> ...
- 9-EasyNetQ之基于主题的路由
RabbitMQ有一个很酷的功能,基于主题的路由,这个功能允许订阅者基于多个条件去过滤消息.一个主题是由点号分隔的单词列表,随消息一同发布.例如:"stock.usd.nyse" ...
- re.findall 两个连续匹配成功的输出后一个
- sys添加调用模块的路径;遍历可以调用模块的路径
import sys sys.path.append("D:") for i in sys.path: print(i)
- session详解&和cookie的区别
session简介 1. 定义 session用来保存会话数据, 将数据保存到服务器中. 2. 作用 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),一个浏览器独占一 ...