JS et CSS3 implémentent un exemple d'image sensible à l'effet d'agrandissement du mouvement de la souris-js tutoriel-php.cn

JS et CSS3 implémentent un exemple d'image sensible à l'effet d'agrandissement du mouvement de la souris

不言

Libérer： 2018-05-05 15:46:27

original

1309 Les gens l'ont consulté

Cet article présente principalement JS et CSS3 pour obtenir l'effet d'agrandissement de l'image en réponse au mouvement de la souris. Il analyse les techniques de fonctionnement pertinentes de javascript et CSS3 en réponse aux événements de la souris pour modifier dynamiquement les attributs des éléments de page afin d'obtenir l'effet d'agrandissement de l'image dans réponse aux événements de la souris. Les amis dans le besoin peuvent se référer à ce qui suit

L'exemple dans cet article décrit l'implémentation de JS et CSS3 pour réaliser l'effet d'agrandissement des images en réponse au mouvement de la souris. J'aimerais le partager avec vous pour votre référence. Les détails sont les suivants :

Je regardais le site NetEase aujourd'hui Lorsque j'ai mis la souris dessus, j'ai constaté que l'image était agrandie et déplacée. loin pour réduire l'image J'ai donc essayé moi-même et 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. à nouveau 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é de nombreux avantages, nous permettant 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 l'expansion à partir du coin supérieur gauche, du coin supérieur droit, du coin inférieur gauche et du coin inférieur droit respectivement, comme vous pouvez l'imaginer, la

transform-origin par défaut est de 50 % 50 %. Le code source de

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%;
      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

Recommandations associées :

Comment implémenter une couche contextuelle couvrant toute la page avec des compétences js et css_ javascript

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!