Home > Article > Web Front-end > How to achieve the centered floating effect of pictures in JS

How to achieve the centered floating effect of pictures in JS

亚连Original: 2018-06-15 16:05:322370browse

This article shares with you the effect of vertically centering and floating images through JS without following the scroll bar. Friends who are interested can follow along and learn.

In this article, we use JS to achieve a picture floating effect. When we use the mouse to scroll down, the picture is suspended in the center and does not follow the scroll. Let's take a look at the effect picture first:

Let’s take a look at all the tested 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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement scrolling message notifications in WeChat mini programs

How to implement text tickers in WeChat mini programs Effect

What are the BOM application skills in JS

How to use the digital scroll plug-in in the WeChat applet

How to achieve the pull-down refresh and pull-up loading effect of the list in the WeChat applet?

How to implement asynchronous component loading in vue webpack?

Use Nginx in vue.js to solve cross-domain issues

How to achieve the maximum common substring in JavaScript

The above is the detailed content of How to achieve the centered floating effect of pictures in JS. For more information, please follow other related articles on the PHP Chinese website!

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement label scrolling switching in JSNext article：How to implement label scrolling switching in JS

See more

How to achieve the centered floating effect of pictures in JS

Related articles