JS를 활용한 이미지 센터링, 플로팅 효과 구현 사례 공유
- 小云云원래의
- 2017-12-25 15:05:422056검색
이 기사에서는 주로 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>관련 권장 사항:
CSS를 사용하여 이미지를 중앙에 배치하는 세 가지 방법
HTML 코드에서 텍스트와 이미지를 중앙에 배치하는 방법은 무엇입니까?
JS는 플로팅 모바일 창(광고 일시 중단)의 특수 효과를 구현합니다
위 내용은 JS를 활용한 이미지 센터링, 플로팅 효과 구현 사례 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.