Comment implémenter l'effet de grossissement du survol de la souris sur les images avec JavaScript ?-js tutoriel-php.cn

Comment implémenter l'effet de grossissement du survol de la souris sur les images avec JavaScript ?

PHPz

Libérer： 2023-10-20 09:16:45

original

2975 Les gens l'ont consulté

JavaScript 如何实现图片鼠标悬停放大效果？

JavaScript Comment obtenir l'effet d'agrandissement des images au survol de la souris ?

De nos jours, la conception Web accorde de plus en plus d'attention à l'expérience utilisateur, et de nombreuses pages Web ajoutent des effets spéciaux aux images. Parmi eux, l'effet d'agrandissement de l'image au survol de la souris est un effet spécial courant, qui peut agrandir automatiquement l'image lorsque l'utilisateur passe la souris, augmentant ainsi l'interaction entre l'utilisateur et l'image. Cet article expliquera comment utiliser JavaScript pour obtenir cet effet et donnera des exemples de code spécifiques.

Analyse des idées :
Pour obtenir l'effet de grossissement de l'image au survol de la souris, nous pouvons utiliser JavaScript pour surveiller les événements de mouvement de la souris et ajouter des styles dynamiques à l'image pour obtenir l'effet de grossissement. Les étapes spécifiques de mise en œuvre sont les suivantes :

Obtenir les éléments de l'image : utilisez le sélecteur JavaScript pour obtenir les éléments de l'image qui doivent être agrandis.
Ajouter un écouteur d'événements de mouvement de la souris : utilisez l'écouteur d'événements JavaScript pour écouter les événements de mouvement de la souris sur l'image. Lorsque la souris survole l'image, la fonction de traitement correspondante est déclenchée.
Modifier le style de l'image : Dans la fonction de traitement, vous pouvez obtenir l'effet d'agrandissement en modifiant le style pertinent de l'image. Vous pouvez utiliser la propriété transform de CSS pour redimensionner la taille de l'image, ou vous pouvez le faire en modifiant les propriétés de largeur et de hauteur de l'image.

L'implémentation spécifique du code est la suivante :

<!DOCTYPE html>
<html>
<head>
<style>
    .zoom-img {
        transition: transform 0.2s;
    }
</style>
</head>
<body>
    <img src="image.jpg" class="zoom-img" id="zoomImg" alt="放大图片">
    
    <script>
        var img = document.getElementById("zoomImg");
        img.addEventListener("mousemove", handleMouseMove);
        
        function handleMouseMove(event) {
            var x = event.clientX;
            var y = event.clientY;
            
            var width = img.offsetWidth;
            var height = img.offsetHeight;
            
            var dx = x - (width / 2 + img.offsetLeft);
            var dy = y - (height / 2 + img.offsetTop);
            
            var scaleX = 1.1;
            var scaleY = 1.1;
            
            img.style.transform = "scale(" + scaleX + ", " + scaleY + ")";
            img.style.transformOrigin = (dx / width) * 100 + "% " + (dy / height) * 100 + "%";
        }
        
        img.addEventListener("mouseout", handleMouseOut);
        
        function handleMouseOut(event) {
            img.style.transform = "";
            img.style.transformOrigin = "";
        }
    </script>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous avons ajouté une classe zoom-img à l'élément image et passé getElementById dans le Méthode de code JavaScript pour obtenir l'élément. Ensuite, nous utilisons la méthode addEventListener pour ajouter deux écouteurs d'événements, l'un est l'événement mousemove pour gérer le mouvement de la souris sur l'image, et l'autre est mouseout est utilisé pour gérer la restauration de l'effet lorsque la souris quitte l'image. <code>zoom-img的类，并在JavaScript代码中通过getElementById方法获取到了该元素。然后我们使用addEventListener方法来添加了两个事件监听器，一个是mousemove事件用于处理鼠标在图片上的移动，另一个是mouseout事件用于处理鼠标离开图片时的效果复原。

在handleMouseMove函数中，我们获取了鼠标在窗口中的坐标，并计算出相对于图片中心点的坐标。然后根据这个坐标值来计算放大的比例和缩放中心点，在修改样式时使用了transform属性来实现图片的缩放效果。

在handleMouseOut函数中，我们将图片的transform和transformOrigin

Dans la fonction handleMouseMove, on obtient les coordonnées de la souris dans la fenêtre et on calcule les coordonnées par rapport au point central de l'image. Ensuite, le taux de grossissement et le point central du zoom sont calculés en fonction de cette valeur de coordonnées. Lors de la modification du style, l'attribut transform est utilisé pour obtenir l'effet de zoom de l'image.

Dans la fonction handleMouseOut, nous réinitialisons les propriétés transform et transformOrigin de l'image en chaînes vides pour restaurer l'image à son état d'origine.

De cette façon, lorsque la souris se déplace sur l'image, l'image sera agrandie en fonction de la position de la souris, augmentant ainsi l'interaction entre l'utilisateur et l'image.

🎜Résumé : 🎜L'utilisation de JavaScript pour implémenter l'effet de grossissement des images au survol de la souris peut ajouter des effets spéciaux dynamiques à la page Web et améliorer l'expérience utilisateur. Pendant le processus de mise en œuvre, nous devons écouter l'événement de mouvement de la souris et modifier le style de l'image pour obtenir l'effet de grossissement. La mise en œuvre de codes spécifiques peut être ajustée et étendue en fonction des besoins réels. J'espère que cet article pourra vous aider à comprendre comment obtenir l'effet de grossissement des images au survol de la souris. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!