JS实现鼠标移入水波效果

程序员鑫平技术 2022年11月7日

0 收藏 406 点赞 576 浏览 1634 个字

前言
最近比较沉迷JS,所以我现在来做个鼠标的交互效果
HTML

<div style="border-radius;position:relative;width:800px;height:200px;background:#f7f7f7;display:block;position:fixed;left:35%;top:50%;overflow:hidden;padding:18px" id="AAC">        <p style="text-align:center;">
            测试鼠标移入
        </p>
</div>

var A = document.querySelectorAll("#AAC")[0];        A.onmouseenter = function (e) {
            this.innerHTML += ""
            this.innerHTML += '<span style="border-radius:50px;position:absolute;display:block;background: #dcdcdc;width:50px;height:50px;left:' + e.offsetX + 'px;top:' + e.offsetY + 'px"></span>'
        }
        A.onmouseleave = function (e) {
            for (var i = 0; i < document.querySelectorAll("#AAC span").length; i++) {
                document.querySelectorAll("#AAC span")[i].remove();
            }
        }

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        span {
            animation:AAC linear 0.5s;
            animation-fill-mode:forwards;
        }
        @keyframes AAC {
            from {            }
            to {
                transform:scale(50);
            }
        }        p {
            color:#3362b3;
            font-size:14px;
            position:absolute;
            z-index:999;
            transition:ease 0.5s;
        }
    </style>
</head>
<body>
    <div style="border-radius;position:relative;width:800px;height:200px;background:#f7f7f7;display:block;position:fixed;left:35%;top:50%;overflow:hidden;padding:18px" id="AAC">        <p style="text-align:center;">
            测试鼠标移入
        </p>
    </div>
    <script>
        var A = document.querySelectorAll("#AAC")[0];        A.onmouseenter = function (e) {
            this.innerHTML += ""
            this.innerHTML += '<span style="border-radius:50px;position:absolute;display:block;background: #dcdcdc;width:50px;height:50px;left:' + e.offsetX + 'px;top:' + e.offsetY + 'px"></span>'
        }
        A.onmouseleave = function (e) {
            for (var i = 0; i < document.querySelectorAll("#AAC span").length; i++) {
                document.querySelectorAll("#AAC span")[i].remove();
            }
        }
    </script>
</body>
</html>