JS与CSS3实现图片响应鼠标移动放大效果示例

JS与CSS3实现图片响应鼠标移动放大效果示例的完整攻略如下：

1.需求分析

在讲解代码实现之前，我们需要对需求进行分析。这个效果的需求描述为：当鼠标移动到图片上时，图片放大。而当鼠标移出图片时，图片复原。因此，我们需要使用JS和CSS3分别实现这个效果。

2.使用CSS3实现响应鼠标移动的放大效果

使用CSS3实现该效果非常简单，只需要使用transform属性就可以轻松实现。以下是实现的步骤：

1.首先，需要创建一个图片元素，并使用CSS3进行样式设置，如下所示：

img {
    width: 200px;
    height: 200px;
    transition: all 0.5s ease-in-out;
}

其中，transition属性用于设置过渡效果。all表示所有的属性都设置了过渡效果；0.5s表示过渡时间为0.5秒；ease-in-out指定了过渡函数。

2.接下来，在hover时，设置transform属性的值，如下所示：

img:hover {
    transform: scale(1.2);
}

这里，scale属性用于设置放大倍数。当鼠标移动到图片上时，transform属性设置为scale(1.2)，表示放大倍数为1.2。

3.最后，在鼠标移开图片时，将transform属性设置为原始值，即：

img:hover {
    transform: scale(1.2);
}

当鼠标移开图片时，transform属性设置为缩放倍数为1，图片就会恢复原始大小了。

3.使用JS实现响应鼠标移动的放大效果

JS实现响应鼠标移动的放大效果，需要先获取鼠标在图片上的位置，再设置图片大小，最后用一些动画函数来实现动画效果。以下是步骤：

1.获取鼠标在图片上的位置，如下所示：

let x = e.clientX - img.offsetLeft;
let y = e.clientY - img.offsetTop;

这里，e.clientX和e.clientY分别表示鼠标在窗口中的位置。img.offsetLeft和img.offseTop则表示图片左侧和上侧的距离。通过计算，可以得到鼠标在图片上的位置。

2.设置图片大小：

img.style.transform = 'translate(-50%, -50%) scale(1.2)';
img.style.width = imgWidth * 1.2 + 'px';
img.style.height = imgHeight * 1.2 + 'px';
img.style.left = x - imgWidth * 0.1 + 'px';
img.style.top = y - imgHeight * 0.1 + 'px';

这里，translate(-50%,-50%)表示将图片的中心点作为参考点；scale(1.2)表示放大倍数为1.2；imgWidth和imgHeight表示图片的原始宽度和高度。计算后，可以设置图片的大小和位置。

3.使用动画函数实现动画效果：

let id = setInterval(frame, 10);
function frame() {
    if (cur == 100) {
        clearInterval(id);
    } else {
        cur++;
        img.style.opacity = cur / 100;
    }
}

这里，使用setInterval函数和clearInterval函数来实现动画效果。frame函数每10毫秒执行一次，对图片的透明度进行调整，从而达到渐变效果。当透明度达到100时，动画停止。

4.示例说明

以上就是JS与CSS3实现图片响应鼠标移动放大效果的完整攻略。下面，我们举两个例子来说明实现方法。

示例1：使用CSS3实现

下面是一个使用CSS3实现的图片放大效果：

<!DOCTYPE html>
<html>
<head>
    <title>图片放大效果</title>
    <style>
        img {
            width: 200px;
            height: 200px;
            transition: all 0.5s ease-in-out;
        }
        img:hover {
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <img src="example.jpg" alt="example">
</body>
</html>

在鼠标移动到图片上时，图片会放大。

示例2：使用JS实现

下面是一个使用JS实现的图片放大效果：

<!DOCTYPE html>
<html>
<head>
    <title>图片放大效果</title>
    <style>
        img {
            width: 200px;
            height: 200px;
            position: relative;
        }
    </style>
</head>
<body>
    <img src="example.jpg" alt="example" id="img">
    <script>
        let img = document.getElementById('img')
        let imgWidth = img.offsetWidth;
        let imgHeight = img.offsetHeight;
        img.addEventListener('mousemove', function (e) {
            let x = e.clientX - img.offsetLeft;
            let y = e.clientY - img.offsetTop;
            img.style.transform = 'translate(-50%, -50%) scale(1.2)';
            img.style.width = imgWidth * 1.2 + 'px';
            img.style.height = imgHeight * 1.2 + 'px';
            img.style.left = x - imgWidth * 0.1 + 'px';
            img.style.top = y - imgHeight * 0.1 + 'px';

            let cur = 0;
            let id = setInterval(frame, 10);
            function frame() {
                if (cur == 100) {
                    clearInterval(id);
                } else {
                    cur++;
                    img.style.opacity = cur / 100;
                }
            }
        })
        img.addEventListener('mouseout', function () {
            img.style.transform = 'translate(-50%, -50%)';
            img.style.width = imgWidth + 'px';
            img.style.height = imgHeight + 'px';
            img.style.left = '50%';
            img.style.top = '50%';

            let cur = 100;
            let id = setInterval(frame, 10);
            function frame() {
                if (cur == 0) {
                    clearInterval(id);
                } else {
                    cur--;
                    img.style.opacity = cur / 100;
                }
            }
        })
    </script>
</body>
</html>

当鼠标移动到图片上时，图片会根据鼠标位置进行放大，并且渐变变得不透明。当鼠标移开时，图片会恢复原始状态，并渐变变得透明。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS与CSS3实现图片响应鼠标移动放大效果示例 - Python技术站