Maison > Article > interface Web > JS+CSS3 permet d'amplifier les événements de mouvement de la souris avec liaison d'image

JS+CSS3 permet d'amplifier les événements de mouvement de la souris avec liaison d'image

php中世界最好的语言original: 2018-05-23 15:44:161869parcourir

Cette fois, je vais vous apporter JS+CSS3 pour créer une image liée à un événement de déplacement de souris à amplifier. Quelles sont les précautions. Voici les cas réels, jetons un oeil.

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>

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

, 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 : transform:scale();

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 :

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: 0 0;
transform-origin: 100% 0;
transform-origin: 0 100%;
transform-origin: 100% 100%;

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 !

Lecture recommandée :

<!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>

Comment utiliser les propriétés et les écouteurs calculés de Vue.js

Comment introduire dynamiquement des fichiers 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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Téléchargez des fichiers via Ajax et utilisez FormData pour effectuer des requêtes AjaxArticle suivant：Téléchargez des fichiers via Ajax et utilisez FormData pour effectuer des requêtes Ajax

Articles Liés

Voir plus