js实现的简单图片浮动效果完整实例-前端开发

JS实现简单图片浮动效果的完整攻略

JS实现简单图片浮动效果的完整攻略

HTML和CSS准备

首先，我们需要准备HTML和CSS代码，以便在页面中添加图片并设置其样式。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>JS实现图片浮动效果</title>
    <style type="text/css">
        .container {
            position: relative;
            width: 500px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }

        .image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="image"></div>
    </div>
</body>
</html>

首先创建一个div容器(.container)，并将其设置为相对定位(position: relative)，并添加一些样式来使容器在页面中居中且具有填充、边框、背景色等属性。然后在容器中添加一个div元素(.image)，并将其设置为绝对定位(position: absolute)，并将其上下左右的偏移设置为50%和transform属性。

此时页面将显示一个灰色的容器，其中包含一个白色的圆形图片。

JS实现图片浮动效果

接下来，我们将会学习使用JavaScript来实现图片浮动效果。主要思路是在图片上绑定鼠标移动事件，并根据鼠标的位置更新图片的位置。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>JS实现图片浮动效果</title>
    <style type="text/css">
        .container {
            position: relative;
            width: 500px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }

        .image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="image"></div>
    </div>

    <script type="text/javascript">
        var image = document.querySelector(".image");

        image.addEventListener("mousemove", function(event) {
            var mouseX = event.clientX;
            var mouseY = event.clientY;

            image.style.top = mouseY - 100 + "px";
            image.style.left = mouseX - 100 + "px";
        });
    </script>
</body>
</html>

我们首先获取图片元素(.image)，并在其上绑定了一个鼠标移动事件。事件处理函数将获取当前鼠标的位置，并根据其在页面中的位置动态更新图片的位置，使其随着鼠标的移动而浮动。

现在在页面中将会看到图片随着鼠标的移动而浮动。

实现图片的复原效果

由于上述代码只实现了简单的浮动动画，我们需要实现一种方法，使得图片可以回到最初的位置。我们需要在图片的mousemove事件内添加一个setTimeout函数，并通过设置一个时间间隔来使图片回到初始位置。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>JS实现图片浮动效果</title>
    <style type="text/css">
        .container {
            position: relative;
            width: 500px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }

        .image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="image"></div>
    </div>

    <script type="text/javascript">
        var image = document.querySelector(".image");

        image.addEventListener("mousemove", function(event) {
            var mouseX = event.clientX;
            var mouseY = event.clientY;

            image.style.top = mouseY - 100 + "px";
            image.style.left = mouseX - 100 + "px";

            setTimeout(function() {
                image.style.top = "50%";
                image.style.left = "50%";
            }, 200);
        });
    </script>
</body>
</html>

我们在事件处理函数的最后添加了一个setTimeout函数，使得图片在200毫秒后恢复到初始状态。此时，在页面中将可见图片随着鼠标的移动而浮动，并回到原始位置。