Heim > Artikel > Web-Frontend > Teilen Sie Beispiele für die Implementierung der Bildzentrierung und des Floating-Effekts mithilfe von JS

Teilen Sie Beispiele für die Implementierung der Bildzentrierung und des Floating-Effekts mithilfe von JS

小云云Original: 2017-12-25 15:05:422055Durchsuche

Dieser Artikel zeigt Ihnen hauptsächlich den Effekt der vertikalen Zentrierung und Aufhängung von Bildern durch JS. Wenn wir mit der Maus nach unten scrollen, wird das Bild in der Mitte angehalten und folgt nicht dem Bildlaufeffekt und lernen.

Werfen wir zunächst einen Blick auf die Renderings:

Werfen wir einen Blick auf alle getesteten Codes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.logo {
 width: 650px;
 height: 383px;
 position:fixed;
 background: url(http://www.php.cn/images/logo.gif) no-repeat;
 margin:auto;
 left:0;
 right:0;
 top:0;
 bottom:0;
}
</style>
<title>图片垂直居中不随滚动条滚动的JS代码</title>
</head>
<body style="height:3000px">
<p class="logo"> </p>
<p>脚本之家JS图片悬浮图片效果</p>
</body>
</html>

Verwandte Empfehlungen:

Drei Möglichkeiten, Bilder mit CSS zu zentrieren

So implementieren Sie Text und Bilder mit HTML Code zentriert?

JS implementiert Spezialeffekte von schwebenden mobilen Fenstern (schwebende Werbung)

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für die Implementierung der Bildzentrierung und des Floating-Effekts mithilfe von JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen 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：Beispiele zur Erläuterung von JS+CSS zur Erzielung eines Rolling-Digital-Clock-EffektsNächster Artikel：Beispiele zur Erläuterung von JS+CSS zur Erzielung eines Rolling-Digital-Clock-Effekts

In Verbindung stehende Artikel

Mehr sehen