JS에서 사진의 중앙 부동 효과를 얻는 방법
- 亚连원래의
- 2018-06-15 16:05:322390검색
이 기사에서는 스크롤 막대를 따르지 않고 JS를 통해 이미지를 수직으로 중앙에 배치하고 정지하는 효과에 대해 공유합니다. 관심 있는 친구들은 따라하고 배울 수 있습니다.
이 기사에서는 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(//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>위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
WeChat 미니 프로그램에서 스크롤 메시지 알림을 구현하는 방법
WeChat 미니 프로그램에서 텍스트 윤곽 효과를 구현하는 방법
방법 WeChat 미니 프로그램에서 디지털 스크롤 플러그인을 사용하세요
WeChat 미니 프로그램에서 목록 풀다운 새로 고침 풀업 로딩 효과를 어떻게 얻을 수 있나요?
vue+webpack에서 비동기 구성 요소 로딩을 구현하는 방법은 무엇입니까?
vue.js에서 Nginx를 사용하여 도메인 간 문제 해결
JavaScript에서 최대 공통 하위 문자열을 찾는 방법
위 내용은 JS에서 사진의 중앙 부동 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JS에서 라벨 스크롤 전환을 구현하는 방법다음 기사：JS에서 라벨 스크롤 전환을 구현하는 방법