JS 롱 맵 상하 스크롤 효과 구현

본 논문 의 사례 는 JS 가 긴 그림 을 상하 로 굴 리 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
사례 설명
긴 그림 을 고정된 너비 의 상자 에 넣 고 마우스 가 상자 의 상반부 에 놓 일 때 그림 이 그림 의 밑부분 에 도착 할 때 까지 아래로 미 끄 러 집 니 다.마우스 가 상자 의 하단 부분 에 놓 여 있 을 때 그림 은 그림 의 상단 에 도착 할 때 까지 위로 미 끄 러 집 니 다.
사례 도표

HTML

<div id="box">
 <img id="pic" src="./program1/images/1.jpg" alt="">
 <div id="top"></div>
<div id="bottom"></div>

CSS
CSS 는 너무 많은 설명 을 하지 않 습 니 다.상세 한 설명 은 주석 부분 을 보십시오.

//    
 * {
 margin: 0;
 padding: 0;
 }
 #box {
 width: 750px;
 height: 200px;
 border: 1px solid #000;
 margin: 200px auto;
 overflow: hidden; /*        */
 position: relative; /*    */
 }

 #pic {
 position: absolute;
 left: 0;
 right: 0;
 }

 
 #top {
 width: 100%;
 height: 50%;
 position: absolute; /*    */
 left: 0;
 cursor: pointer; /*  */
  /*      */
 top:0; 
 }
 
 #bottom {
 width: 100%;
 height: 50%;
 position: absolute; /*    */
 left: 0;
 cursor: pointer;
 /*      */
 bottom: 0;
 }
</style>

JS 핵심 코드
JS 상세 설명-마우스 진입 이벤트 감청(상자 윗부분 을 예 로 들 면)
마우스 가 상자 윗부분 에 머 물 렀 을 때 onmouseover 이 벤트 를 사용 합 니 다.우선 타 이 머 를 제거 해 야 합 니 다.그렇지 않 으 면 타이머 중첩 현상 이 나타 날 수 있 습 니 다.타이머 설정,타이머 의 num 은 그림 의 top 속성 을 바 꾸 어 그림 이 위로 미 끄 러 지 는 효 과 를 얻 는 것 입 니 다.if 문장의 조건 은 그림 이 바닥 에 도 착 했 을 때 위로 미 끄 러 지 는 것 을 멈 추 는 것 입 니 다.(박스 아 랫 부분 유사)

 top.onmouseover = function(){
  //   pic  top 
  //      
  // alert(0);
  clearInterval(intervalId);

  //       
  intervalId = setInterval(function(){
  if(num > -600){
   num -= 10;
   pic.style.top = num + "px";
  }
  
  },20);

JS 상세 설명-마우스 이동 이벤트 감청(상자 윗부분 을 예 로 들 면)
마 우 스 를 꺼 낼 때 onmouseout 이 벤트 를 사용 하여 타 이 머 를 지 웁 니 다.(박스 아 랫 부분 유사)

top.onmouseout = function() {
  clearInterval(intervalId);
 }

JS 모든 코드 전시

<script>
 window.onload = function() {
 //     
 var box = document.getElementById('box');
 var pic = document.getElementById('pic');
 var top = document.getElementById('top');
 var bottom = document.getElementById('bottom');
 var intervalId, num = 0;
 //         
 top.onmouseover = function(){
  //   pic  top 
  //      
  // alert(0);
  clearInterval(intervalId);

  //      
  intervalId = setInterval(function(){
  if(num > -600){
   num -= 10;
   pic.style.top = num + "px";
  }
  
  },20);

 };
  //         
 top.onmouseout = function() {
  clearInterval(intervalId);
 }
 //         
 bottom.onmouseover = function(){
  //   pic  top 
  //      
  // alert(0);
  clearInterval(intervalId);

  //      
  intervalId = setInterval(function(){
  if(num < 0){
   num += 10;
   pic.style.top = num + "px";
  }
  
  },20);
 };
 //         
 bottom.onmouseout = function() {
  clearInterval(intervalId);
 };
 
 }
</script>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.