1.创建 ripple.js 复制以下代码即可
!function (t, e) {
"use strict";
if (void 0 === n || !n) var n = function (t) {
var e = {
opacity: .5, speed: .6, bgColor: "#ffffff", cursor: !0
};
this.option = this.extend(t, e), this.isltIE9() || this.init()
};
n.prototype = {
createEle: function (t) {
return e.createElement(t)
},
extend: function (t, e) {
var n = JSON.parse(JSON.stringify(e)); for (var i in t) n[i] = t[i]; return n
},
isltIE9: function () {
return !!/MSIE6.0|MSIE7.0|MSIE8.0|MSIE9.0/i.test(navigator.userAgent.split(";")[1].replace(/[ ]/g, ""))
},
getPosition: function (t) {
var e = this.getBoundingClientRect(), n = Math.max(e.width, e.height); return {
range: n, x: t.clientX - e.left - n / 2, y: t.clientY - e.top - n / 2
}
},
addEvent: function () {
for (var t = this, n = 0; n < this.elements.length; n++)
"boolean" == typeof t.option.cursor && t.option.cursor && (this.elements[n].style.cursor = "pointer"),
this.elements[n].addEventListener("mousedown", function (n) {
n.stopPropagation();
var i = t.getPosition.call(this, n),
o = e.createElement("span");
o.className = "ripple",
o.style.top = i.y + "px",
o.style.left = i.x + "px",
o.style.width = i.range + "px",
o.style.height = i.range + "px",
o.style.animationDuration = t.option.speed + "s",
o.style.background = t.option.bgColor,
o.style.opacity = t.option.opacity,
o.addEventListener("animationend", function () {
this.parentNode.removeChild(this)
}, !1),
this.appendChild(o)
}, !1)
}
}, n.prototype.init = function () {
var n = this;
t.onload = function () {
n.elements = e.querySelectorAll('[data-ripple="ripple"]'), n.addEvent()
}
}, t.Ripple = n
}(window, document);
2.创建 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script data-static="2.0" data-onmap="3.0" data-dev="true" src="/f/js/Spatial.bjs?&v=3.0"></script>
<script src="./ripple.js"></script>
<style>
[data-ripple="ripple"] {
position: relative;
overflow: hidden;
-webkit-user-select: none;
-moz-webkit-user-select:none;
-ms-user-select:none;
}
[data-ripple="ripple"] .ripple {
display: block;
width: 100%;
height: 100%;
border-radius:100%;
position: absolute;
top: 0;
left: 0;
z-index: 888;
background: rgba(157, 97, 97, 0.5);
pointer-events: none;
transform: scale(0);
animation: ripple .6s 0s linear;
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
.aaa{
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="aaa" data-ripple="ripple"></div>
</body>
<script type="text/javascript">
new Ripple({
opacity : 0.6, //水波纹透明度
speed : 1, //水波纹扩散速度
bgColor : "#ff0", //水波纹颜色
cursor : true //是否显示手型指针
})
</script>
</html>
标签：水波纹,function,style,option,var,点击,ripple From： https://www.cnblogs.com/zgfs/p/17469252.html