JS+CSS3 réalise l'effet de grossissement interactif entre la souris et l'image-js tutoriel-php.cn

JS+CSS3 réalise l'effet de grossissement interactif entre la souris et l'image

php中世界最好的语言

Libérer： 2018-05-12 15:43:56

original

2202 Les gens l'ont consulté

Cette fois, je vais vous apporter JS+CSS3 pour obtenir l'effet de grossissement interactif entre la souris et l'image. Quelles sont les précautions pour JS+CSS3 pour obtenir l'effet de grossissement interactif entre la souris et l'image. image. Ce qui suit est un cas pratique. Jetons un coup d'œil.

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 :

Explication détaillée de la méthode de formulaire pilotée par modèle angulaire