Home > Article > Web Front-end > Sharing examples of implementing image centering and floating effect using JS

Sharing examples of implementing image centering and floating effect using JS

小云云Original: 2017-12-25 15:05:422064browse

This article mainly shares with you the effect of vertically centering and suspending images through JS. When we use the mouse to scroll down, the image is suspended in the center and does not follow the scrolling effect. Friends who are interested can follow and learn.

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

Related recommendations:

Three ways to center images with CSS

How to center text and images in HTML code?

JS implements the special effects of floating mobile windows (floating advertisements)

The above is the detailed content of Sharing examples of implementing image centering and floating effect using JS. For more information, please follow other related articles on the PHP Chinese website!

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：Examples to explain JS+CSS to achieve rolling digital clock effectNext article：Examples to explain JS+CSS to achieve rolling digital clock effect

See more

Sharing examples of implementing image centering and floating effect using JS

Related articles