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妹纸在哪看了 ...
随机推荐
- python sort、sorted高级排序技巧
文章转载自:脚本之家 Python list内置sort()方法用来排序,也可以用python内置的全局sorted()方法来对可迭代的序列排序生成新的序列. 1)排序基础 简单的升序排序是非常容易的 ...
- Oracle导入导出表
使用PL SQL Developer进行操作 一.导出 工具<<导出表<<sql插入<<选择用户和要导出的表,勾选创建表,选择输出文件(格式最好为.sql),点击导 ...
- 牛客HJ浇花。
我也不知道这是什么类型的题,算是简单模拟吧.但是有个方法很赞. 开两个数组,一个模拟花,一个记录不同浇花次数花的数量: 要找浇水的次数,那么记每次浇水的开头和结尾就行了,a—b;那么f[a]++;f[ ...
- unet网络讲解，附代码
转: http://www.cnblogs.com/gujianhan/p/6030639.html key1: FCN对图像进行像素级的分类,从而解决了语义级别的图像分割(semantic segm ...
- innerHTML与innerText功能的强大
例: <div id="study"> <span style="color:red">学习</span>study < ...
- HDU2044：一只小蜜蜂...
题目贴不上了︿(￣︶￣)︿http://acm.hdu.edu.cn/showproblem.php?pid=2044 注意数据类型,用int会超范围 #include<stdio.h> ...
- windows错误：错误0x80070091 目录不是空的
错误: Window 下目录无法删除,提示 “ 错误0x80070091 目录不是空的 ” 解决: 1.开始菜单>附件>命令提示符>右键>以管理员身份运行 2.删除文件:(如 ...
- 2018.4.2 flask web
from flask import Flask,request from flask import jsonify from flask import render_template app = Fl ...
- (0-1)CSS 标签语法的属性
CSS text-decoration 属性 display display 属性规定元素应该生成的框的类型
- 《DSP using MATLAB》Problem 6.15
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...