经验分享程序开发文档资料数据资源其它资源

点击元素后出现波纹散开效果特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 点击元素后出现波纹散开效果特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

点击元素后出现波纹散开效果特效代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为&#8203;点击元素后出现波纹散开效果，属于站长常用代码" />
<title>&#8203;点击元素后出现波纹散开效果</title>
<script type="text/javascript" src="js/waves.min.js"></script>
<link rel="stylesheet" href="css/waves.min.css"/>
<style type="text/css">
	.box1, .box2 {
		width:200px;
		height:50px;
		margin:30px 0;
		line-height:50px;
		text-align:center
	}
</style>
</head>
<body>
<div style="margin:50px auto;width:330px;">
    <!-- 代码 开始 -->
            <a href="#examples" class="waves-effect waves-button waves-float">See the examples</a>
            <div class="box1 flat-box">Flat Box</div>
            <div class="box2 float-box">Float Box</div>
            <img class="waves-image" src="images/shan.jpg">
            <script type="text/javascript">
                    Waves.init();
                    Waves.attach('.flat-box', ['waves-block']);
                    Waves.attach('.float-box', ['waves-block', 'waves-float']);
                    Waves.attach('.waves-image');       
            </script>
    <!-- 代码 结束 -->
</div>
</body>
</html>

JS代码(waves.min.js):

/*! * Waves v0.7.4 * http://fian.my.id/Waves * * Copyright 2014 Alfiana E. Sibuea and other contributors * Released under the MIT license * https://github.com/fians/Waves/blob/master/LICENSE */
!function(a,b){
	"use strict";
	"function"==typeof define&&define.amd?define([],function(){
	return b.apply(a)}
):"object"==typeof exports?module.exports=b.call(a):a.Waves=b.call(a)}
("object"==typeof global?global:this,function(){
	"use strict";
	function a(a){
	return null!==a&&a===a.window}
function b(b){
	return a(b)?b:9===b.nodeType&&b.defaultView}
function c(a){
	var b=typeof a;
	return"function"===b||"object"===b&&!!a}
function d(a){
	return c(a)&&a.nodeType>0}
function e(a){
	var b=m.call(a);
	return"[object String]"===b?l(a):c(a)&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(b)&&a.hasOwnProperty("length")?a:d(a)?[a]:[]}
function f(a){
	var c,d,e={
	top:0,left:0}
,f=a&&a.ownerDocument;
	return c=f.documentElement,"undefined"!=typeof a.getBoundingClientRect&&(e=a.getBoundingClientRect()),d=b(f),{
	top:e.top+d.pageYOffset-c.clientTop,left:e.left+d.pageXOffset-c.clientLeft}
}
function g(a){
	var b="";
	for(var c in a)a.hasOwnProperty(c)&&(b+=c+":"+a[c]+";
	");
	return b}
function h(a,b,c){
	if(c){
	c.classList.remove("waves-rippling");
	var d=c.getAttribute("data-x"),e=c.getAttribute("data-y"),f=c.getAttribute("data-scale"),h=c.getAttribute("data-translate"),i=Date.now()-Number(c.getAttribute("data-hold")),j=350-i;
	0>j&&(j=0),"mousemove"===a.type&&(j=150);
	var k="mousemove"===a.type?2500:o.duration;
	setTimeout(function(){
	var a={
	top:e+"px",left:d+"px",opacity:"0","-webkit-transition-duration":k+"ms","-moz-transition-duration":k+"ms","-o-transition-duration":k+"ms","transition-duration":k+"ms","-webkit-transform":f+" "+h,"-moz-transform":f+" "+h,"-ms-transform":f+" "+h,"-o-transform":f+" "+h,transform:f+" "+h}
;
	c.setAttribute("style",g(a)),setTimeout(function(){
	try{
	b.removeChild(c)}
catch(a){
	return!1}
}
,k)}
,j)}
}
function i(a){
	if(q.allowEvent(a)===!1)return null;
	for(var b=null,c=a.target||a.srcElement;
	null!==c.parentElement;
	){
	if(c.classList.contains("waves-effect")&&!(c instanceof SVGElement)){
	b=c;
	break}
c=c.parentElement}
return b}
function j(a){
	var b=i(a);
	if(null!==b){
	if(b.disabled||b.getAttribute("disabled")||b.classList.contains("disabled"))return;
	if(q.registerEvent(a),"touchstart"===a.type&&o.delay){
	var c=!1,d=setTimeout(function(){
	d=null,o.show(a,b)}
,o.delay),e=function(e){
	d&&(clearTimeout(d),d=null,o.show(a,b)),c||(c=!0,o.hide(e,b))}
,f=function(a){
	d&&(clearTimeout(d),d=null),e(a)}
;
	b.addEventListener("touchmove",f,!1),b.addEventListener("touchend",e,!1),b.addEventListener("touchcancel",e,!1)}
else o.show(a,b),n&&(b.addEventListener("touchend",o.hide,!1),b.addEventListener("touchcancel",o.hide,!1)),b.addEventListener("mouseup",o.hide,!1),b.addEventListener("mouseleave",o.hide,!1)}
}
var k=k||{
}
,l=document.querySelectorAll.bind(document),m=Object.prototype.toString,n="ontouchstart"in window,o={
	duration:750,delay:200,show:function(a,b,c){
	if(2===a.button)return!1;
	b=b||this;
	var d=document.createElement("div");
	d.className="waves-ripple waves-rippling",b.appendChild(d);
	var e=f(b),h=0,i=0;
	"touches"in a&&a.touches.length?(h=a.touches[0].pageY-e.top,i=a.touches[0].pageX-e.left):(h=a.pageY-e.top,i=a.pageX-e.left),i=i>=0?i:0,h=h>=0?h:0;
	var j="scale("+b.clientWidth/100*3+")",k="translate(0,0)";
	c&&(k="translate("+c.x+"px,"+c.y+"px)"),d.setAttribute("data-hold",Date.now()),d.setAttribute("data-x",i),d.setAttribute("data-y",h),d.setAttribute("data-scale",j),d.setAttribute("data-translate",k);
	var l={
	top:h+"px",left:i+"px"}
;
	d.classList.add("waves-notransition"),d.setAttribute("style",g(l)),d.classList.remove("waves-notransition"),l["-webkit-transform"]=j+" "+k,l["-moz-transform"]=j+" "+k,l["-ms-transform"]=j+" "+k,l["-o-transform"]=j+" "+k,l.transform=j+" "+k,l.opacity="1";
	var m="mousemove"===a.type?2500:o.duration;
	l["-webkit-transition-duration"]=m+"ms",l["-moz-transition-duration"]=m+"ms",l["-o-transition-duration"]=m+"ms",l["transition-duration"]=m+"ms",d.setAttribute("style",g(l))}
,hide:function(a,b){
	b=b||this;
	for(var c=b.getElementsByClassName("waves-rippling"),d=0,e=c.length;
	e>d;
	d++)h(a,b,c[d])}
}
,p={
	input:function(a){
	var b=a.parentNode;
	if("i"!==b.tagName.toLowerCase()||!b.classList.contains("waves-effect")){
	var c=document.createElement("i");
	c.className=a.className+" waves-input-wrapper",a.className="waves-button-input",b.replaceChild(c,a),c.appendChild(a);
	var d=window.getComputedStyle(a,null),e=d.color,f=d.backgroundColor;
	c.setAttribute("style","color:"+e+";
	background:"+f),a.setAttribute("style","background-color:rgba(0,0,0,0);
	")}
}
,img:function(a){
	var b=a.parentNode;
	if("i"!==b.tagName.toLowerCase()||!b.classList.contains("waves-effect")){
	var c=document.createElement("i");
	b.replaceChild(c,a),c.appendChild(a)}
}
}
,q={
	touches:0,allowEvent:function(a){
	var b=!0;
	return/^(mousedown|mousemove)$/.test(a.type)&&q.touches&&(b=!1),b}
,registerEvent:function(a){
	var b=a.type;
	"touchstart"===b?q.touches+=1:/^(touchend|touchcancel)$/.test(b)&&setTimeout(function(){
	q.touches&&(q.touches-=1)}
,500)}
}
;
	return k.init=function(a){
	var b=document.body;
	a=a||{
}
,"duration"in a&&(o.duration=a.duration),"delay"in a&&(o.delay=a.delay),n&&(b.addEventListener("touchstart",j,!1),b.addEventListener("touchcancel",q.registerEvent,!1),b.addEventListener("touchend",q.registerEvent,!1)),b.addEventListener("mousedown",j,!1)}
,k.attach=function(a,b){
	a=e(a),"[object Array]"===m.call(b)&&(b=b.join(" ")),b=b?" "+b:"";
	for(var c,d,f=0,g=a.length;
	g>f;
	f++)c=a[f],d=c.tagName.toLowerCase(),-1!==["input","img"].indexOf(d)&&(p[d](c),c=c.parentElement),-1===c.className.indexOf("waves-effect")&&(c.className+=" waves-effect"+b)}
,k.ripple=function(a,b){
	a=e(a);
	var c=a.length;
	if(b=b||{
}
,b.wait=b.wait||0,b.position=b.position||null,c)for(var d,g,h,i={
}
,j=0,k={
	type:"mousedown",button:1}
,l=function(a,b){
	return function(){
	o.hide(a,b)}
}
;
	c>j;
	j++)if(d=a[j],g=b.position||{
	x:d.clientWidth/2,y:d.clientHeight/2}
,h=f(d),i.x=h.left+g.x,i.y=h.top+g.y,k.pageX=i.x,k.pageY=i.y,o.show(k,d),b.wait>=0&&null!==b.wait){
	var m={
	type:"mouseup",button:1}
;
	setTimeout(l(m,d),b.wait)}
}
,k.calm=function(a){
	a=e(a);
	for(var b={
	type:"mouseup",button:1}
,c=0,d=a.length;
	d>c;
	c++)o.hide(b,a[c])}
,k.displayEffect=function(a){
	k.init(a)}
,k}
);
	//# sourceMappingURL=waves.min.js.map

CSS代码(waves.min.css):

/*! * Waves v0.7.4 * http://fian.my.id/Waves * * Copyright 2014 Alfiana E. Sibuea and other contributors * Released under the MIT license * https://github.com/fians/Waves/blob/master/LICENSE */
.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}
.waves-effect .waves-ripple{position:absolute;border-radius:50%;width:100px;height:100px;margin-top:-50px;margin-left:-50px;opacity:0;background:rgba(0,0,0,.2);background:-webkit-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:-o-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:-moz-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform,opacity;-o-transition-property:-o-transform,opacity;transition-property:transform,opacity;-webkit-transform:scale(0) translate(0,0);-moz-transform:scale(0) translate(0,0);-ms-transform:scale(0) translate(0,0);-o-transform:scale(0) translate(0,0);transform:scale(0) translate(0,0);pointer-events:none}
.waves-effect.waves-light .waves-ripple{background:rgba(255,255,255,.4);background:-webkit-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:-o-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:-moz-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%)}
.waves-effect.waves-classic .waves-ripple{background:rgba(0,0,0,.2)}
.waves-effect.waves-classic.waves-light .waves-ripple{background:rgba(255,255,255,.4)}
.waves-notransition{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;transition:none!important}
.waves-button,.waves-circle{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(circle,#fff 100%,#000 100%)}
.waves-button,.waves-button:hover,.waves-button:visited,.waves-button-input{white-space:nowrap;vertical-align:middle;cursor:pointer;border:none;outline:0;color:inherit;background-color:transparent;font-size:1em;line-height:1em;text-align:center;text-decoration:none;z-index:1}
.waves-button{padding:.85em 1.1em;border-radius:.2em}
.waves-button-input{margin:0;padding:.85em 1.1em}
.waves-input-wrapper{border-radius:.2em;vertical-align:bottom}
.waves-input-wrapper.waves-button{padding:0}
.waves-input-wrapper .waves-button-input{position:relative;top:0;left:0;z-index:1}
.waves-circle{text-align:center;width:2.5em;height:2.5em;line-height:2.5em;border-radius:50%}
.waves-float{-webkit-mask-image:none;-webkit-box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12);box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12);-webkit-transition:all 300ms;-moz-transition:all 300ms;-o-transition:all 300ms;transition:all 300ms}
.waves-float:active{-webkit-box-shadow:0 8px 20px 1px rgba(0,0,0,.3);box-shadow:0 8px 20px 1px rgba(0,0,0,.3)}
.waves-block{display:block}
a.waves-effect .waves-ripple{z-index:-1}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
44.41 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
44.41 KB
立即下载
钟园
了解
打赏作者 鼓励作者
Html JS 图片特效6
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章