Maison > Article > interface Web > Partager des exemples de mise en œuvre du centrage d'image et de l'effet flottant à l'aide de JS
Partager des exemples de mise en œuvre du centrage d'image et de l'effet flottant à l'aide de JS
- 小云云original
- 2017-12-25 15:05:422011parcourir
Cet article vous explique principalement comment réaliser la suspension centrale verticale des images via JS Lorsque nous utilisons la souris pour faire défiler vers le bas, l'image sera centrée et suspendue sans suivre l'effet de défilement. Les amis intéressés peuvent suivre et. apprendre.
Regardons d'abord les rendus :
Regardons 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(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>Recommandations associées :
Trois façons de centrer les images avec CSS
Comment implémenter du texte et des images avec HTML Code centré ?
JS implémente des effets spéciaux de fenêtres mobiles flottantes (publicités flottantes)
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!