526互联

点击水波纹效果 点击ripple效果

发布时间 2023-06-09 15:07:33作者: 一条丶小咸鱼

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>