How to achieve the centered floating effect of pictures in JS-JS Tutorial-php.cn

How to achieve the centered floating effect of pictures in JS

亚连

Release： 2018-06-15 16:05:32

Original

2391 people have browsed it

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>

Copy after login

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!