javascript动画之磁性吸附效果篇

2023年6月10日下午10:22 • JavaScript

对于“javascript动画之磁性吸附效果篇”的完整攻略，我将从以下几个方面进行讲解：

磁性吸附效果的概述
实现方法
示例说明
注意事项

1. 磁性吸附效果的概述

磁性吸附效果是常用于网页设计的动画效果之一，它可以使鼠标在网页上的元素上移动时，元素就像被一个磁铁吸附一样，会跟随鼠标的移动而移动。

2. 实现方法

磁性吸附效果的实现方法有多种，这里介绍一种基于Javascript的实现方法，其基本原理是：通过计算鼠标与元素的距离，控制元素的位置与样式，从而实现磁性吸附效果。具体步骤如下：

步骤一：获取元素

通过document.querySelector方法获取需要添加磁性吸附效果的元素，并给元素设置默认的top和left样式。

步骤二：计算鼠标与元素距离

通过document.addEventListener方法监听鼠标移动事件，计算鼠标与元素的距离，从而得出元素需要移动的距离。

步骤三：控制元素的位置与样式

根据计算得出的元素需要移动的距离，控制元素的位置，并改变元素的样式，以实现磁性吸附效果。

3. 示例说明

以下是两个示例说明：

示例一：

这是一个基于页面中的图片元素实现的磁性吸附效果。

<html>
    <head>
        <style>
            img {
                position: absolute;
                top: 50px;
                left: 50px;
            }
        </style>
    </head>
    <body>
        <img src="image.png" id="pic">
        <script>
            let pic = document.querySelector('#pic');
            let x, y;
            function move(e) {
                let distance = 5;
                pic.style.left = x - distance + 'px';
                pic.style.top = y - distance + 'px';
            }
            pic.addEventListener('mousemove', function(e) {
                x = e.clientX;
                y = e.clientY;
                move(e);
            });
            pic.addEventListener('mouseout', function() {
                pic.style.left = '50px';
                pic.style.top = '50px';
            });
        </script>
    </body>
</html>

示例二：

这是一个基于页面中的多个圆形元素实现的磁性吸附效果。

<html>
    <head>
        <style>
            .circle {
                width: 20px;
                height: 20px;
                border-radius: 10px;
                background-color: #f00;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="circle" id="circle1"></div>
        <div class="circle" id="circle2"></div>
        <div class="circle" id="circle3"></div>
        <script>
            let circles = document.querySelectorAll('.circle');
            let distance = 80;
            function move(e) {
                let x = e.clientX;
                let y = e.clientY;
                circles.forEach(function(circle) {
                    let cx = circle.getBoundingClientRect().left + 10;
                    let cy = circle.getBoundingClientRect().top + 10;
                    let d = Math.sqrt(Math.pow(x - cx, 2) + Math.pow(y - cy, 2));
                    if (d < distance) {
                        circle.style.left = cx - (distance - d) * (x - cx) / d + 'px';
                        circle.style.top = cy - (distance - d) * (y - cy) / d + 'px';
                    } else {
                        circle.style.left = '';
                        circle.style.top = '';
                    }
                });
            }
            document.addEventListener('mousemove', move);
        </script>
    </body>
</html>