네 이 티 브 JS 를 사용 하여 스크롤 백 효 과 를 구현 하 는 예제 코드
사용자 가 마우스 휠 을 통 해 페이지 와 상호작용 을 하고 수직 방향 에서 페이지 를 굴 릴 때 mousewheel 사건 이 발생 합 니 다.이 사건 은 전체 화면 전환 효 과 를 실현 하 는 데 필요 한 것 입 니 다.IE6,IE7,IE8,Opera 10+,Safari 5+에 서 는 모두'mousewheel'이 벤트 를 제 공 했 고 Firefox 3.5+에 서 는 같은 이 벤트 를 제공 했다.'DOMMouse Scroll'.mousewheel 이벤트 에 대응 하 는 이벤트 대상 에서 우 리 는 또 다른 특수 속성 인 wheelDelta 속성 을 사용 할 것 입 니 다.
1."mousewheel"이벤트 의"event.wheelDelta"속성 값:되 돌아 오 는 값 입 니 다.플러스 라면 롤러 가 위로 굴 러 가 는 것 을 설명 하고 마이너스 라면 롤러 가 아래로 굴 러 가 는 것 을 설명 합 니 다.되 돌아 오 는 값 은 모두 120 의 배수,즉 폭 크기=되 돌아 오 는 값/120 이다.
2."DOMMouse Scroll"이벤트 의"event.detail"속성 값:되 돌아 오 는 값 입 니 다.마이너스 라면 롤러 가 위로 굴 러 가 는 것 을 설명 합 니 다("event.wheelDelta"와 정반 대 입 니 다).플러스 라면 롤러 가 아래로 굴 러 가 는 것 을 설명 합 니 다.되 돌아 오 는 값 은 모두 3 의 배수,즉 폭 크기=되 돌아 오 는 값/3 이다.
2.실현 효과
소스 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.container {
transition: .5s;
}
.item {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div class="container">
<div class="item" style="background-color: rgb(255,255,0)"></div>
<div class="item" style="background-color: rgb(255, 145, 0)"></div>
<div class="item" style="background-color: rgb(0, 17, 255)"></div>
<div class="item" style="background-color: rgb(0, 255, 136)"></div>
</div>
<script src="sun.js"></script>
<script src='https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js'></script>
<script>
$(() => {
let i = 0;
let move = sun.throttle(e => {
if(e.wheelDelta < 0) {
if( i === $(".item").length - 1) return ;
i++;
} else {
if( i === 0) return;
i--;
}
$(".container").css("transform",`translateY(-${i*100}vh)`);
},500);
window.onmousewheel = move;
})
</script>
</body>
</html>throttle()함수 코드 는 다음 과 같 습 니 다.
function throttle(fn,wait) {
let endTime = 0;
return function() {
if(new Date() - endTime < wait) return;
fn.apply(this,arguments);
endTime = new Date();
}
},이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
