Teilen Sie Beispiele für die Implementierung der Bildzentrierung und des Floating-Effekts mithilfe von JS-js-Tutorial-php.cn

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

小云云

Freigeben： 2017-12-25 15:05:42

Original

2062 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!