materializecss的水波纹效果
参考http://www.materializecss.cn/waves.html
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
height: 100px;
line-height: 100px;
text-align: center;
width: 100px;
background-color: #ccc;
}
/* Firefox Bug: link not triggered */ .waves-effect .waves-ripple {
z-index: -1;
} .waves-effect {
position: relative;
cursor: pointer;
display: inline-block;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
vertical-align: middle;
z-index: 1;
-webkit-transition: .3s ease-out;
transition: .3s ease-out;
} .waves-effect .waves-ripple {
position: absolute;
border-radius: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
opacity: 0;
background: rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
-webkit-transform: scale(0);
transform: scale(0);
pointer-events: none;
}
/*.waves-light此类class是wave颜色*/ .waves-effect.waves-light .waves-ripple {
background-color: rgba(255, 255, 255, 0.45);
} .waves-effect.waves-red .waves-ripple {
background-color: rgba(244, 67, 54, 0.7);
} .waves-effect.waves-yellow .waves-ripple {
background-color: rgba(255, 235, 59, 0.7);
} .waves-effect.waves-orange .waves-ripple {
background-color: rgba(255, 152, 0, 0.7);
} .waves-effect.waves-purple .waves-ripple {
background-color: rgba(156, 39, 176, 0.7);
} .waves-effect.waves-green .waves-ripple {
background-color: rgba(76, 175, 80, 0.7);
} .waves-effect.waves-teal .waves-ripple {
background-color: rgba(0, 150, 136, 0.7);
} .waves-effect img {
position: relative;
z-index: -1;
}
</style>
</head> <body> <p class="waves-effect waves-orange">ppppp</p> <script>
if ('ontouchstart' in window) {
document.body.addEventListener('touchstart', showEffect, false);
}
document.body.addEventListener('mousedown', showEffect, false);
var TouchHandler = {
/* uses an integer rather than bool so there's no issues with
* needing to clear timeouts if another touch event occurred
* within the 500ms. Cannot mouseup between touchstart and
* touchend, nor in the 500ms after touchend. */
touches: 0,
allowEvent: function(e) {
var allow = true; if (e.type === 'touchstart') {
TouchHandler.touches += 1; //push
} else if (e.type === 'touchend' || e.type === 'touchcancel') {
setTimeout(function() {
if (TouchHandler.touches > 0) {
TouchHandler.touches -= 1; //pop after 500ms
}
}, 500);
} else if (e.type === 'mousedown' && TouchHandler.touches > 0) {
allow = false;
} return allow;
},
touchup: function(e) {
TouchHandler.allowEvent(e);
}
};
var Effect = {
// Effect delay
duration: 750, show: function(e, element) { // Disable right click
if (e.button === 2) {
return false;
} var el = element || this; // Create ripple
var ripple = document.createElement('div');
ripple.className = 'waves-ripple';
el.appendChild(ripple); // Get click coordinate and element witdh
var pos = offset(el);
var relativeY = e.pageY - pos.top;
var relativeX = e.pageX - pos.left;
var scale = 'scale(' + el.clientWidth / 100 * 10 + ')'; // Support for touch devices
if ('touches' in e) {
relativeY = e.touches[0].pageY - pos.top;
relativeX = e.touches[0].pageX - pos.left;
} // Attach data to element
ripple.setAttribute('data-hold', Date.now());
ripple.setAttribute('data-scale', scale);
ripple.setAttribute('data-x', relativeX);
ripple.setAttribute('data-y', relativeY); // Set ripple position
var rippleStyle = {
'top': relativeY + 'px',
'left': relativeX + 'px'
}; ripple.className = ripple.className + ' waves-notransition';
ripple.setAttribute('style', convertStyle(rippleStyle));
ripple.className = ripple.className.replace('waves-notransition', ''); // Scale the ripple
rippleStyle['-webkit-transform'] = scale;
rippleStyle['-moz-transform'] = scale;
rippleStyle['-ms-transform'] = scale;
rippleStyle['-o-transform'] = scale;
rippleStyle.transform = scale;
rippleStyle.opacity = '1'; rippleStyle['-webkit-transition-duration'] = Effect.duration + 'ms';
rippleStyle['-moz-transition-duration'] = Effect.duration + 'ms';
rippleStyle['-o-transition-duration'] = Effect.duration + 'ms';
rippleStyle['transition-duration'] = Effect.duration + 'ms'; rippleStyle['-webkit-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
rippleStyle['-moz-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
rippleStyle['-o-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
rippleStyle['transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)'; ripple.setAttribute('style', convertStyle(rippleStyle));
}, hide: function(e) {
TouchHandler.touchup(e); var el = this;
var width = el.clientWidth * 1.4; // Get first ripple
var ripple = null;
var ripples = el.getElementsByClassName('waves-ripple');
if (ripples.length > 0) {
ripple = ripples[ripples.length - 1];
} else {
return false;
} var relativeX = ripple.getAttribute('data-x');
var relativeY = ripple.getAttribute('data-y');
var scale = ripple.getAttribute('data-scale'); // Get delay beetween mousedown and mouse leave
var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
var delay = 350 - diff; if (delay < 0) {
delay = 0;
} // Fade out ripple after delay
setTimeout(function() {
var style = {
'top': relativeY + 'px',
'left': relativeX + 'px',
'opacity': '0', // Duration
'-webkit-transition-duration': Effect.duration + 'ms',
'-moz-transition-duration': Effect.duration + 'ms',
'-o-transition-duration': Effect.duration + 'ms',
'transition-duration': Effect.duration + 'ms',
'-webkit-transform': scale,
'-moz-transform': scale,
'-ms-transform': scale,
'-o-transform': scale,
'transform': scale
}; ripple.setAttribute('style', convertStyle(style)); setTimeout(function() {
try {
el.removeChild(ripple);
} catch (e) {
return false;
}
}, Effect.duration);
}, delay);
}
} function showEffect(e) {
var element = getWavesEffectElement(e);
if (element !== null) {
Effect.show(e, element); if ('ontouchstart' in window) {
element.addEventListener('touchend', Effect.hide, false);
element.addEventListener('touchcancel', Effect.hide, false);
} element.addEventListener('mouseup', Effect.hide, false);
element.addEventListener('mouseleave', Effect.hide, false);
element.addEventListener('dragend', Effect.hide, false);
}
}; function getWavesEffectElement(e) { if (TouchHandler.allowEvent(e) === false) {
return null;
} var element = null;
var target = e.target || e.srcElement; while (target.parentNode !== null) {
if (!(target instanceof SVGElement) && target.className.indexOf('waves-effect') !== -1) {
element = target;
break;
}
target = target.parentNode;
}
return element;
} function offset(elem) {
var docElem,
win,
box = { top: 0, left: 0 },
doc = elem && elem.ownerDocument; docElem = doc.documentElement; if (typeof elem.getBoundingClientRect !== typeof undefined) {
box = elem.getBoundingClientRect();
}
win = getWindow(doc);
return {
top: box.top + win.pageYOffset - docElem.clientTop,
left: box.left + win.pageXOffset - docElem.clientLeft
};
} function isWindow(obj) {
return obj !== null && obj === obj.window;
} function getWindow(elem) {
return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView;
} function convertStyle(obj) {
var style = ''; for (var a in obj) {
if (obj.hasOwnProperty(a)) {
style += a + ':' + obj[a] + ';';
}
} return style;
}
</script> </body> </html>
materializecss的水波纹效果的更多相关文章
- jquery ripples水波纹效果( 涟漪效果)
这个效果是我从bootstrap-material-design上面分离下来的,bootstrap-material-design的一些组件样式我不太不喜欢,但是非常喜欢这个水波纹效果,所以就有了这篇 ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- 兼容Android的水波纹效果
Android的水波纹效果只有高版本才有,我们希望自己的应用在低版本用低版本的阴影,高版本用水波纹,这怎么做呢?其实,只要分drawable和drawablev21两个文件夹就好了. 普通情况下的se ...
- android自定义控件(4)-自定义水波纹效果
一.实现单击出现水波纹单圈效果: 照例来说,还是一个自定义控件,观察这个效果,发现应该需要重写onTouchEvent和onDraw方法,通过在onTouchEvent中获取触摸的坐标,然后以这个坐标 ...
- 自定义view实现水波纹效果
水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...
- Android 颜色渲染(七) RadialGradient 环形渲染实现水波纹效果
利用环形渲染我们可以做到什么? 其实很多都是非常常见的,比如上一篇实现的帮帮糖效果, 彩色的热气球,比如这里要讲到的水波纹效果,或者也可以理解为扩散色渲染效果 首先看一下效果图: 轻触屏幕,即可看到对 ...
- 聊聊Android5.0中的水波纹效果
水波纹效果已经不是什么稀罕的东西了,用过5.0新控件的小伙伴都知道这个效果,可是如果使用一个TextView或者Button或者其它普通控件的话,你是否知道如何给它设置水波纹效果呢?OK,我们今天就来 ...
- android 点击水波纹效果
这里是重点,<ripple>是API21才有的新Tag,正是实现水波纹效果的; 其中<ripple android:color="#FF21272B" .... ...
- Android 自定义view实现水波纹效果
http://blog.csdn.net/tianjian4592/article/details/44222565 在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了 ...
随机推荐
- 数据结构HUFFman求权值
#include <bits/stdc++.h>using namespace std;priority_queue< int, vector <int>, greate ...
- git 应用
git - 简易指南 助你开始使用 git 的简易指南,木有高深内容,;). 安装 下载 git OSX 版 下载 git Windows 版 下载 git Linux 版 创建新仓库 创建新文件夹, ...
- HDU2036：改革春风吹满地
Problem Description " 改革春风吹满地, 不会AC没关系; 实在不行回老家, 还有一亩三分地. 谢谢!(乐队奏乐)" 话说部分学生心态极好,每天就知道游戏,这次 ...
- 初识Odoo的辅助核算
Odoo财务里类似辅助核算功能的叫做:Analytic Accouting,翻译为,分析会计. 再说说辅助核算是个什么东东. 财务辅助核算就是基于会计科目和会计理论分析财务数据的辅助工具. 简单的说就 ...
- js获取元素得几种情况
HTML代码 <div class="divClass" name="myClass"> <input type="password ...
- pycharm远程调试配置
目录: 安装pycharm 配置pycharm远程调试 使用测试 一.安装pycharm(略) 二.配置pycharm远程调试 1.菜单--->Tools--->Deployment--- ...
- nginx-port-Permission-denied
nginx use 9000 port Permission denied other port ok 新架构下web服务需要使用反向代理,将不同的请求转发到不同的service,对应不同的端口. ...
- s3c2410串口笔记
- mysql的索引设计原则以及常见索引的区别
索引定义:是一个单独的,存储在磁盘上的数据库结构,其包含着对数据表里所有记录的引用指针. 数据库索引的设计原则: 为了使索引的使用效率更高,在创建索引时,必须考虑在哪些字段上创建索引和创建什么类型的索 ...
- 数学与猜想 合情推理模式 (G. 波利亚 著)
第十二章 几个著名模式 (已看) $1. 证实一个结论 $2. 连续证实几个结论 $3. 证实一个未必可信的结论 $4. 类比推理 $5. 加深类比 $6. 被隐没的类比推理 第十三章 更多的模式与最 ...