집 > 기사 > 웹 프론트엔드 > JS를 활용한 이미지 센터링, 플로팅 효과 구현 사례 공유

JS를 활용한 이미지 센터링, 플로팅 효과 구현 사례 공유

小云云원래의: 2017-12-25 15:05:422095검색

이 기사에서는 주로 JS를 통해 사진의 수직 중앙 정지를 구현하는 방법을 공유합니다. 마우스를 사용하여 아래로 스크롤하면 스크롤 효과를 따르지 않고 사진이 중앙에 정지됩니다. 그리고 배우세요.

먼저 렌더링을 살펴보겠습니다.

테스트된 모든 코드를 살펴보겠습니다.

<!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>

JS를 활용한 이미지 센터링, 플로팅 효과 구현 사례 공유

관련 기사