Dieser Artikel zeigt Ihnen den Effekt der vertikalen Zentrierung und des Schwebens von Bildern durch JS, ohne der Bildlaufleiste zu folgen. Freunde, die interessiert sind, können mitmachen und lernen.
In diesem Artikel verwenden wir JS, um einen Bild-Floating-Effekt zu erzielen. Wenn wir mit der Maus nach unten scrollen, bleibt das Bild in der Mitte hängen und folgt dem Scrollen nicht Bild zuerst:
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(//www.jb51.net/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>Das Obige habe ich für alle zusammengestellt an alle in der Zukunft.
Verwandte Artikel:
So implementieren Sie Laufnachrichtenbenachrichtigungen in WeChat-Miniprogrammen
So implementieren Sie Textticker in WeChat-Miniprogrammen Wirkung
Was sind die BOM-Anwendungsfähigkeiten in JS?
So verwenden Sie das digitale Scroll-Plug-in im WeChat-Miniprogramm
Wie erreicht man den Pulldown-Aktualisierungs- und Pullup-Ladeeffekt der Liste im WeChat-Applet?
Wie implementiert man das asynchrone Laden von Komponenten in vue+webpack?
Verwenden Sie Nginx in vue.js, um domänenübergreifende Probleme zu lösen
So finden Sie die maximale gemeinsame Teilzeichenfolge in JavaScript
Das obige ist der detaillierte Inhalt vonSo erzielen Sie den zentrierten Schwebeeffekt von Bildern in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
