Heim > Artikel > Web-Frontend > So erzielen Sie den zentrierten Schwebeeffekt von Bildern in JS

So erzielen Sie den zentrierten Schwebeeffekt von Bildern in JS

亚连Original: 2018-06-15 16:05:322380Durchsuche

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!

JavaScript nginx vue.js webpack JS bom 异步微信小程序

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：So implementieren Sie das Umschalten des Label-Scrollings in JSNächster Artikel：So implementieren Sie das Umschalten des Label-Scrollings in JS

In Verbindung stehende Artikel

Mehr sehen