Heim > Artikel > Web-Frontend > Es ist nicht erforderlich, dass JS und jQuery CSS3-Mouse-Floating implementieren, um das Bild zu vergrößern

Es ist nicht erforderlich, dass JS und jQuery CSS3-Mouse-Floating implementieren, um das Bild zu vergrößern

高洛峰Original: 2017-03-01 15:21:441339Durchsuche

In diesem Artikel wird ein Teil des CSS3-Codes mitgeteilt, um den Effekt des Schwebens und Vergrößerns von Bildern zu erzielen. Der Code ist sehr gut und hat einen Referenzwert siehe

Kein JS- und jQuery-Code erforderlich, um CSS3-Mausbewegungen und -vergrößerungen von Bildern zu implementieren

<html>
<head>
<title></title>
<style>
.box {
    /* 可见视觉区域 */
    width: 480px; height: 250px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.size {
    width: 1000px; height: 1000px;
    position: absolute; left: 50%; top: 50%;
    margin: -500px 0 0 -500px;
    /* 水平居中 */
    text-align: center;
}
.zoom {
    /* 缩放的元素 */
    width: 480px; height: 250px;
    vertical-align: middle;    
    -webkit-transition: -webkit-transform .2s;
    transition: transform .2s;
}
.box:hover .zoom {
    /* hover放大 */
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    zoom: 1.05;
}
:root .box:hover .zoom {
    zoom: 1;
}
.middle {
    /* 垂直居中 */
    display: inline-block;
    width: 0; height: 100%;
    vertical-align: middle;
}
</style>
</head>
<body>
<h4>左上角定位</h4>
<p class="box">
<img src="dafu.jpg" class="zoom">
</p>
<h4>居中定位</h4>
<p class="box">
    <p class="size">
        <img src="dafu.jpg" class="zoom"><i class="middle"></i>
    </p>
</p>
</body>

Das Obige ist was Der Editor stellt Ihnen vor, wie Sie das Verschieben und Vergrößern von Bildern mit CSS3 ohne JS- und jQuery-Code realisieren können. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere verwandte Artikel zum Realisieren von CSS3-Mouse-Floating und zum Vergrößern von Bildern ohne JS und jQuery finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Das Zoom-Attribut oder das Overflow:auto-Attribut in CSS löscht FloatingNächster Artikel：Das Zoom-Attribut oder das Overflow:auto-Attribut in CSS löscht Floating

In Verbindung stehende Artikel

Mehr sehen