鼠标划过越是靠近图片中心图片越大的实现逻辑```js ``` ![image.png](https://p6-jueji

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> 鼠标划过变大 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #wrap {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 10px;
            text-align: center;
            /* border: 1px solid #ccc */
        }
        
        #wrap img {
            width: 64px;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <img src="img/1.png" alt="">
        <img src="img/2.png" alt="">
        <img src="img/3.png" alt="">
        <img src="img/4.png" alt="">
        <img src="img/5.png" alt="">
    </div>
    <script>
        function BigImg() {
            this.wrap = document.querySelector("#wrap")
            this.imgs = document.querySelectorAll("#wrap img");
            this.init();
        };
        BigImg.prototype = {
            init: function() {
                this.img_Move()
            },
            img_Move: function() {
                var _this = this
                document.addEventListener("mousemove", function(event) {
                    var e = event || window.event;
                    for (var i = 0; i < _this.imgs.length; i++) {
                        _this.numbe(e, _this.imgs[i]);
                    }
                })
            },
            numbe: function(e, dom) {
                var x = Math.pow(e.pageX - dom.offsetLeft - dom.offsetWidth / 2, 2);
                var y = Math.pow(e.pageY - this.wrap.offsetTop - dom.offsetHeight / 2, 2);
                var d = Math.sqrt(x + y);
                d = Math.min(d, 128);
                dom.style.width = (128 - d) / 64 * 64 + 64 + "px";
            }
        };
        new BigImg();
    </script>
</body>

</html>