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妹纸在哪看了 ...
随机推荐
- Django框架之下载以及基本命令
Django的下载与基本命令 pip3 install Django #下载完成后保存在python解释器下的bin文件目录下 创建一个Django Project #命令行输入: django-ad ...
- mbpoll Test FreeModbus TCP Demo
/********************************************************************************* * mbpoll Test Fre ...
- Java中的数组初探
1.数组的类型? Java中的数组为引用类型. 2.数组的三种初始化方式 1. int[] arr1=new int[] {1,2,3,4,}; 2. int[] arr2= {1,2,3,4,}; ...
- Unity3D 重写下拉菜单/Dropdown组件、开启每个按钮可用
Override Dropdown Component 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) ...
- xdoj-1106(判断组合数是否溢出）
1 首先 ans=c(n,a[0] )*c(n-a[0],a[1])*(n-a[0]-a[1],a[2])...... a[i]: 含义 在数列中i的个数有a[i]个 2 如何判断 x*y>p( ...
- lesson4Embedding-fastai
dense layer:mnist识别中,需要十组dense权重矩阵来计算这十个输出内容,conv矩阵每一个元素乘以另一个矩阵的元素并相加,得到一个值,最后加上sigmoid(softmax在二元情况 ...
- weixin-java-mp集成微信公众号自带客服功能
电脑端登录公众号管理后台,[添加功能插件]开通客服功能,输入"人工客服"接入客服热线 底部有我的微信二维码,如有问题,可加好友进行技术交流! weixi ...
- ios Programming:The Big Nerd Ranch Guid(6th Edition) (Joe Conway & AARON HILLEGASS 著)
Introduction (已看) Prerequisites What Has Changed in the Sixth Edition? Our Teaching Philosophy How t ...
- SVN提交强制输入日志信息
在团队开发时,因一些团队成员提交代码时没有写提交说明的习惯,为了规范版本管理,增强大家的团队意识,上网找到了强制录入提交日志的方法.方法如下: 一.编写bat文件,命名为pre-commit.bat, ...
- 自定义简单的模板引擎-JS模板引擎
http://www.cnblogs.com/52fhy/p/5393673.html