Comment utiliser JS+CSS3 pour réaliser un zoom avant et arrière sur l'image en réponse au mouvement de la souris-js tutoriel-php.cn

Comment utiliser JS+CSS3 pour réaliser un zoom avant et arrière sur l'image en réponse au mouvement de la souris

php中世界最好的语言

Libérer： 2018-06-01 11:12:01

original

2185 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser JS+CSS3 pour réaliser le zoom avant et arrière des images en réponse au mouvement de la souris. Quelles sont les précautions et voici des cas pratiques. regarder.

Je regardais le site NetEase aujourd'hui. Lorsque j'ai mis la souris dessus, j'ai constaté que l'image avait été agrandie et éloignée pour réduire l'image, alors je l'ai essayé moi-même. Les résultats sont les suivants.

Méthode 1 : Utiliser js et css3

L'effet est le suivant :

Cette implémentation est très simple, utilisez simplement les événements mouseover et mouseout de js, mais je ne sais pas comment faire zoomer l'image à partir du milieu. encore dans le futur. Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
  <title>网易图片动画</title>
  <style>
    p.img {
      width: 220px;
      height: 170px;
      margin: 200px auto;
      overflow: hidden;
    }
    img.bigger {
      width: 100%;
      height:100%;
    }
    @keyframes bigger {
      from {width: 100%;height: 100%;}
      to {width: 110%; height: 110%;}
    }
    @keyframes smaller {
      from {width: 110%;height: 110%;}
      to {width: 100%; height: 100%;}
    }
  </style>
</head>
<body>
  <p class="img">
    <img class="bigger" src="http://cms-bucket.nosdn.127.net/d9b6afa0bad743f88c1780c3a064202c20170218074455.jpeg?imageView&thumbnail=185y116&quality=85" alt="">
  </p>
  <script>
    var img = document.querySelector("img");
    img.onmouseover = function () {
      img.style.cssText = "animation: bigger 2s;width:110%; height:110%;";
    }
    img.onmouseout = function () {
      img.style.cssText = "animation: smaller 2s";
    }
  </script>
</body>
</html>

Copier après la connexion

Méthode 2 : Utiliser la méthode css3

css3 nous a en effet apporté un de nombreux avantages, ce qui nous permet de gérer plus facilement les problèmes. Ceci peut être réalisé en utilisant transform:scale();, mais cela doit être utilisé en combinaison avec le survol, et la durée de la transition doit être définie correctement pour obtenir de meilleurs résultats. Sans plus tarder, l'effet est le suivant :

Cet effet n'est-il pas bien meilleur ? Vous pouvez voir qu'il s'étend à partir du centre.

Mais tant que nous ajoutons l'attribut
transform-origin, nous pouvons bien contrôler le point central du changement, tel que :

transform-origin: 0 0;
transform-origin: 100% 0;
transform-origin: 0 100%;
transform-origin: 100% 100%;

Copier après la connexion

signifie depuis le coin supérieur gauche , le coin supérieur droit et le coin inférieur gauche respectivement. Le coin et le coin inférieur droit sont développés. Comme vous pouvez l'imaginer, la valeur par défaut de

transform-origin est 50 % 50 %. 🎜> est le suivant :

Je crois que vous avez lu cet article. Vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

<!DOCTYPE html>
<html>
<head>
  <title>网易图片动画</title>
  <style>
    p.img {
      width: 220px;
      height: 170px;
      margin: 200px auto;
      overflow: hidden;
    }
    img.bigger {
      width: 100%;
      height:100%;
      transition:transform 2s;
    }
    img.bigger:hover{
      transform: scale(1.2,1.2);
    }
  </style>
</head>
<body>
  <p class="img">
    <img class="bigger" src="http://cms-bucket.nosdn.127.net/d9b6afa0bad743f88c1780c3a064202c20170218074455.jpeg?imageView&thumbnail=185y116&quality=85" alt="">
  </p>
</body>
</html>

Copier après la connexion

Lecture recommandée :

Quels sont les moyens de mettre en œuvre l'internationalisation front-end avec jQuery.i18n

Comment utiliser jQuery.i18n.properties Internationaliser le code JS

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment utiliser JS+CSS3 pour réaliser un zoom avant et arrière sur l'image en réponse au mouvement de la souris