js 实现Material UI点击涟漪效果示例

目录
  • 正文
    • HTML
    • CSS
    • JS
    • 实现效果

正文

我个人而言还是挺喜欢Material UI这套设计风格的。一些细节方面做的还不错。就比如今天要给大家分享的点击涟漪效果。Material UI里面叫做Ripples。好了,话不多说,开始吧。

HTML

<div class="example">Click me</div>

CSS

.example {
    position: relative;
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    margin-top: 30px;
    box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.ripple {
    position: absolute;
    border-radius: 50%;
    background-color: #0000001a;
    animation: ripple 225ms cubic-bezier(0, 0, .2, 1) forwards;
    transform: scale3d(0, 0, 0);
    pointer-events: none;
}
@keyframes ripple {
    from {
        transform: scale3d(0, 0, 0);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}

JS

const exampleEl = document.querySelector('.example');
// 移动端触发顺序 touchstart => touchend => mousemove => mousedown => mouseup => click
// 文档https://w3c.github.io/touch-events/#mouse-events
let rippleEl = null, startTime, isMouseup = false;
// touchstart
function handleTouchstart(e) {
    createRipple(e);
}
// touchend
function handleTouchend(e) {
    removeRipple(e);
    // 阻止mouse事件触发
    e.preventDefault();
}
// touchcancel
function handleTouchcancel(e) {
    removeRipple(e);
}
// mousedown
function handleMousedown(e) {
    // 避免mouseup,mouseleave重复执行
    isMouseup = false;
    createRipple(e);
}
// mouseup
function handleMouseup(e) {
    isMouseup = true;
    removeRipple(e);
}
// mouseleave
function handleMouseleave(e) {
    if (isMouseup || rippleEl === null) {
        return;
    }
    removeRipple(e)
}
// 创建ripple
function createRipple(e) {
    startTime = e.timeStamp;
    const current = { x: e.clientX, y: e.clientY }
    if (e.type === 'touchstart') {
        current.x = e.touches[0].clientX;
        current.y = e.touches[0].clientY;
    }
    const rect = exampleEl.getBoundingClientRect();
    const vertex = {
        nw: { x: rect.left, y: rect.top },
        ne: { x: rect.left + rect.width, y: rect.top },
        se: { x: rect.left + rect.width, y: rect.top + rect.height },
        sw: { x: rect.left, y: rect.top + rect.height }
    }
    let max = 0;
    for (const key in vertex) {
        // ripple半径
        const radius = getDistance({ x: current.x, y: current.y }, vertex[key]);
        max = Math.max(max, radius);
    }
    rippleEl = document.createElement('div');
    rippleEl.className = 'ripple';
    rippleEl.style.left = (current.x - rect.left - max) + 'px';
    rippleEl.style.top = (current.y - rect.top - max) + 'px';
    rippleEl.style.width = (max * 2) + 'px';
    rippleEl.style.height = (max * 2) + 'px';
    exampleEl.appendChild(rippleEl);
}
// 移除ripple
function removeRipple(e) {
    if (e.timeStamp - startTime > 225) {
        rippleEl.remove();
        rippleEl = null;
    } else {
        // 采用animation属性实现动画效果。相比transition的好处在于不用手动触发重绘
        rippleEl.addEventListener('animationend', function () {
            this.remove();
            if (this === rippleEl) {
                rippleEl = null;
            }
        });
    }
}
// 绑定事件
exampleEl.addEventListener('mousedown', handleMousedown);
exampleEl.addEventListener('mouseup', handleMouseup);
exampleEl.addEventListener('mouseleave', handleMouseleave);
exampleEl.addEventListener('touchstart', handleTouchstart);
exampleEl.addEventListener('touchend', handleTouchend);
exampleEl.addEventListener('touchcancel', handleTouchcancel);
/**
 * 获取两点间距离
 * @param {object} a 第一个点坐标
 * @param {object} b 第二个点坐标
 * @returns
 */
function getDistance(a, b) {
    const x = a.x - b.x;
    const y = a.y - b.y;
    return Math.hypot(x, y); // Math.sqrt(x * x + y * y);
}

实现效果

以上就是js 实现Material UI点击涟漪效果示例的详细内容,更多关于js Material UI点击涟漪效果的资料请关注我们其它相关文章!

时间: 2022-09-19

js&nbsp;实现验证码输入框示例详解

目录 前言 思路 遇到的问题 HTML CSS JS 前言 验证码输入框应该是很常见的需求吧,不知道各位小伙伴在在遇到的时候是选择找一找插件还是自己动手撸一个呢?我花了点时间撸了一个出来,实际体验还不错,分享给大家. 思路 我在实现之前肯定也是上网搜了一下的,网上的方式大多是使用多个input标签来实现,但我觉得不太优雅,就自己想了一个方法.使用了6个div标签和一个input标签.验证码长度一般是4位或6位,我这里用6位做演示. 先将6个div使用flex布局平铺. 再将input使用绝对定位

JavaScript Canvas实现噪点滤镜回忆童年电视雪花屏

目录 引言 正文 初始化渲染 雪花屏动画 帧动画播放 引言 相信很多人80,90后的同学对童年里电视机的突然出现刺啦刺啦的雪花屏记忆犹新,本期将用 pixi.js 来完成一个电视机播放动漫然后突然出现雪花屏的动画,里面主要讲解了如何使用pixi.js播放帧动画和如何用噪点滤镜制造雪花屏. 正文 初始化渲染 import * as PIXI from "pixi.js" const GAME_WIDTH = 800; const GAME_HEIGHT = 600; export def

JavaScript中async与await实现原理与细节

目录 一.回调地狱 二.Promise 三.生成器(generator) 四.使用生成器同步化promise 五.async.await异步代码究极解决方案 一.回调地狱 在es6兴起之后许多人都开始使用promise,promise目的是解决es5中的回调地狱(callback hell),那么什么是回调地狱呢?先来提一个需求,现在需要发送n个request请求,第二个请求参数需要第一个请求的结果,第三个请求的参数需要第二个请求的结果,以此类推... ,在没有promise的条件下,我们不难使

js基于div丝滑实现贝塞尔曲线

目录 引言 分析 实现 布局 如何计算y的偏移量 Math.sin() 和 Math.cos() 正弦曲线 余弦曲线 计算更多信息 完善剩余 完成跑马灯制作 贝塞尔曲线 简单封装一下方法 完整示例 style SCript 引言 今天遇到朋友发来的一个ui图,询问我如何实现下图这样的效果[vue项目],(听说是类似LED灯的展示效果),于是便有了今天的小demo,要实现一个类似下图的动效,上面的灯会一直重复滚动,但是这个并不是什么难点,主要在于如何实现这种平滑的曲线,日常我们的开发的div在我们

JS实现羊了个羊小游戏实例

目录 引言 rem布局方案 popbox.js使用原理 html代码 样式代码 javascript代码 导入图片素材列表 startHandler函数实现 randomList 工具方法 clickHandler函数内部 createShadow方法 startHandler后续的逻辑 引言 这两天火爆全场的<羊了个羊>游戏,相信大家都玩过了,那么在玩这个游戏的同时,我想大家都会好奇这个游戏的实现,本文就带大家使用css,html,js来实现一个动物版的游戏. 首先我用到了2个插件,第一个插

JavaScript中的canvas 实现一个圆环渐变倒计时效果

目录 前言 1.效果图展示 2.需求分析 3.实现的技术 4.实现的过程 1. HTML 部分 2. SASS部分 3. JavaScript部分 5.全部源码 1.index.html 2. style.scss 3. index.js 前言 内容: 效果图 需求分析 实现技术 实现过程 全部源码 1.效果图展示 随着时间的减少, 圆环的红黄色部分会慢慢的减少,圆环中的数字会变小,一直到0停止. 2.需求分析 可以自定义倒计时结束的时间 圆环的颜色是渐变的 倒计时的动画在视觉上是流畅运行, 而

javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码

本文实例讲述了javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果.分享给大家供大家参考.具体如下: 下面的玫瑰绘制用到了HTML 5的canvas,所以你的浏览器需要支持HTML 5.个人还是比较推荐chrome,这个效果在Firefox下也会稍卡. 效果图: 演示地址:http://demo.jb51.net/js/2015/js-flower-canvas.html 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

Javascript中浮点数相乘的一个解决方法

Javascript中的浮点数相乘是个很有意思的事情. 浮点数相乘有很多方式,下面是我给出的一个我自己认为不错的解决方案: 复制代码 代码如下: function FxF(f1, f2) {    f1 += '';    f2 += '';    var f1Len = f1.split('.')[1].length,        f2Len = f2.split('.')[1].length; if (f1Len) {        f1 = f1.replace('.', '');   

JavaScript中使用replace结合正则实现replaceAll的效果

方法: string.replace(new RegExp(oldString,"gm"),newString)) gm 分别代表: g=global, m=multiLine 大致上方法就是这样的,可以实现替换全部指定字串 另一个简单的验证JS的方法: 在浏览器地址栏输入 javascript:alert("abcabcabc".replace(new RegExp("a","gm"),"ad")) 这样

javascript支持IE和firefox(FF)的渐变透明效果

function Clear (DataType ,DataThis, DataTime, DataInterval) DataType 布尔值 - - 是否隐藏或显示 DataThis 元素 - - 被操作元素 DataTime 数字 - - 发生渐变时间 DataInterva 数字 - - 渐变刷新间隔 以下是HTML网页特效代码, 渐变 0.5, Test, parseInt(Math.random() * 2000), 10)" type="button" valu

Javascript中判断一个值是否为undefined的方法详解

前言 相信大家都知道当声明一个变量,并且没有给赋值的情况下,它的初始值是undefined.但是在javascript中,怎么检查一个值是否为undefined呢? 简单来说,在现代浏览器中,你可以安全的比较变量是否为undefined if (name === undefined) {...} 一些人反对直接使用undefined变量进行比较,因为在旧的浏览器中允许它的值被重新赋值,比如下面这样: undefined = "test" 在被重新赋值后,使用undefined指令将不能

Javascript中正则表达式的使用及基本语法

前面的话 正则表达式在人们的印象中可能是一堆无法理解的字符,但就是这些符号却实现了字符串的高效操作.通常的情况是,问题本身并不复杂,但没有正则表达式就成了大问题.javascript中的正则表达式作为相当重要的知识,本文将介绍正则表达式的基础语法 定义 正则表达式(Regular Expression)是一门简单语言的语法规范,是强大.便捷.高效的文本处理工具,它应用在一些方法中,对字符串中的信息实现查找.替换和提取操作 javascript中的正则表达式用RegExp对象表示,有两种写法:一种

JavaScript中的类(Class)详细介绍

在JavaScript中,可以使用类(Class)来实现面向对象编程(Object Oriented Programming).不过,JavaScript中的类与Java中的有所不同,其相应的定义和使用也不一样. JavaScript中类的定义 在JavaScript中,所有从同一个原型对象(prototype)处衍生出来的对象组成了一个类:也就是说,JavaScript中的类是一个对象集合的概念,如果两个对象它们的prototype相同,那么它们就属于同一个类:JavaScript中的类甚至都

深入了解javascript中的prototype与继承

通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性列表.javascript创建对象时采用了写时复制的理念.只有构造器才具有prototype属性,原型链继承就是创建一个新的指针,指向构造器的prototype属性.prototype属性之所以特别,是因为javascript时读取属性时的遍历机制决定的.本质上它就是一个普通的指针. 构造器包括: 1.Object2.Function3.Array4.Date5.String 下面我们来举一些例子吧 复制代

深入探讨javascript中的数据类型

学一门编程语言,无非两方面:一是语法,二是数据类型.类C语言的语法不外乎if.while.for.函数.算术运算等,面向对象的语言再加上object. 语法只是语言设计者预先做的一套规则,不同语言语法不尽相同,但都有一些共通点,对于熟悉一两门编程语言的人,学其他的编程语言时,语法往往不是问题(当然,如果你一直学的是类C语言,那么首次接触lisp时肯定也要花些时间),学习的重点往往是数据类型及其相关操作上,不是有句老话:"数据结构+算法=程序"!其次,有些语言的语法本身就存在设计问题(j