JS und CSS3 implementieren ein Beispiel für einen Bildzoomeffekt als Reaktion auf Mausbewegungen-js-Tutorial-php.cn

JS und CSS3 implementieren ein Beispiel für einen Bildzoomeffekt als Reaktion auf Mausbewegungen

不言

Freigeben： 2018-05-05 15:46:27

Original

1335 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich JS und CSS3 vorgestellt, um den Bildvergrößerungseffekt als Reaktion auf Mausbewegungen zu erzielen. Er analysiert die relevanten Betriebstechniken von Javascript und CSS3 als Reaktion auf Mausereignisse, um Seitenelementattribute dynamisch zu ändern, um den Bildvergrößerungseffekt zu erzielen Reaktion auf Mausereignisse. Freunde in Not können sich auf Folgendes beziehen:

Das Beispiel in diesem Artikel beschreibt die Implementierung von JS und CSS3, um den Vergrößerungseffekt von Bildern als Reaktion auf Mausbewegungen zu realisieren. Ich möchte es als Referenz mit Ihnen teilen:

Als ich heute mit der Maus darauf klickte, stellte ich fest, dass das Bild vergrößert und verschoben war Also habe ich es selbst versucht und die Ergebnisse sind wie folgt.

Methode 1: Verwenden Sie js und css3

Der Effekt ist wie folgt:

Diese Implementierung ist sehr einfach, verwenden Sie einfach die Ereignisse Mouseover und Mouseout von js, aber ich weiß nicht, wie ich das Bild von der Mitte aus vergrößern soll. Versuchen wir es In Zukunft wieder. Der Code lautet wie folgt:

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

Nach dem Login kopieren

Methode 2: CSS3-Methode verwenden

css3 hat uns tatsächlich viele Vorteile gebracht, ja, wir können Probleme bequemer lösen. Dies kann durch die Verwendung von transform:scale(); erreicht werden, dies muss jedoch in Kombination mit Hover verwendet werden und die Dauer des Übergangs muss richtig eingestellt werden, um bessere Ergebnisse zu erzielen. Der Effekt ist ohne weiteres wie folgt:

Ist dieser Effekt nicht viel besser? Man sieht, dass er sich von der Mitte aus ausdehnt.
Aber solange wir das Attribut transform-origin hinzufügen, können wir den Mittelpunkt der Änderung gut steuern, wie zum Beispiel:

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

Nach dem Login kopieren

Sie stellen die Erweiterung von der oberen linken Ecke, der oberen rechten Ecke, der unteren linken Ecke bzw. der unteren rechten Ecke dar. Wie Sie sich vorstellen können, beträgt der Standardwert transform-origin 50 % Der Quellcode von

lautet wie folgt:

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

Nach dem Login kopieren

Verwandte Empfehlungen:

So implementieren Sie eine Popup-Ebene, die die gesamte Seite abdeckt, mit js- und css_javascript-Kenntnissen

Das obige ist der detaillierte Inhalt vonJS und CSS3 implementieren ein Beispiel für einen Bildzoomeffekt als Reaktion auf Mausbewegungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!