Dieses Mal bringe ich Ihnen JS+CSS3, um ein Bild zu erstellen, das an ein Mausbewegungsereignis gebunden ist, um es zu vergrößern. JS+CSS3, um ein Bild zu erstellen, das an ein Mausbewegungsereignis gebunden ist, um es zu vergrößern. Was sind die Vorsichtsmaßnahmen 🎜> Hier sind die tatsächlichen Fälle, schauen wir uns das an.
Ich habe mir heute die NetEase-Website angesehen und festgestellt, dass das Bild vergrößert und wegbewegt wurde, um es selbst zu verkleinern. Die Ergebnisse sind wie folgt.Methode 1: Verwenden Sie js und css3
Der Effekt ist wie folgt:
Mouseover und Mouseout von js, aber ich weiß nicht, wie ich das Bild von der Mitte aus vergrößern soll. Versuchen wir es Auch in Zukunft lautet der Code 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>Methode 2: Verwenden Sie die CSS3-Methode
css3 hat uns tatsächlich viele Vorteile gebracht , was es uns erleichtert, mit Problemen umzugehen. Dies kann durch die Verwendung von 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: transform:scale();
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%;
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>So verwenden Sie die berechneten Eigenschaften und Listener von Vue.js
So führen Sie JS-Dateien dynamisch ein
Das obige ist der detaillierte Inhalt vonJS+CSS3 ermöglicht die Verstärkung von Bildbindungs-Mausbewegungsereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
