Cet article partage avec vous l'effet du centrage vertical et du flottement des images via JS sans suivre la barre de défilement. Les amis intéressés peuvent suivre et apprendre.
Dans cet article, nous utilisons JS pour obtenir un effet de flottement d'image Lorsque nous utilisons la souris pour faire défiler vers le bas, l'image est suspendue au centre et ne suit pas le défilement. l'image d'abord :
Jetons un coup d'œil à tous les codes testés :
<!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>Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que ce sera le cas. être utile à tout le monde à l’avenir.
Articles connexes :
Comment implémenter les notifications de messages défilants dans les mini-programmes WeChat
Comment implémenter le ticker de texte dans les mini-programmes WeChat Effet
Quelles sont les compétences d'application liées à la nomenclature en JS
Comment utiliser le plug-in de défilement numérique dans le mini programme WeChat
Comment implémenter le chargement asynchrone de composants dans vue+webpack ?
Utilisez Nginx dans vue.js pour résoudre les problèmes inter-domaines
Comment trouver la sous-chaîne commune maximale en JavaScript
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
