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

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.clientXe.clientY分别表示鼠标在窗口中的位置。img.offsetLeftimg.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;imgWidthimgHeight表示图片的原始宽度和高度。计算后,可以设置图片的大小和位置。

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实现图片响应鼠标移动放大效果示例

基础教程推荐