uiux 20일차

<마우스 휠 할 때 페이지가 한 페이지씩 넘겨갈 때>

// for문과 비슷한 'each'
// 모든 page 클래스를 가진 요소를 순화하며 각각에 대해 하나씩 처리

$('.page').each(function(){
  // 각 page 요소에 마우스 휠 이벤트 추가
  
  $(this).on("mouseheel DOWNScroll",function(e){
    // 브라우저의 기본 동작을 막고 커스텀 스크롤 동작으로 대체
    e.preventDefault();
    
    var delta = 0; 
    // 마우스 휠 이동 방향과 크기를 지정하기 위한 변수
    
    if (!event) event = window.event;
    // 이벤트 객체가 존재하지 않을 경우
    // window.event로 설정{브라우저 호환성을 위해 사용}
    
    if (event.wheelDelta){
      delta = event.wheelDelta / 120;
       // 크롬, IE 중에서는 event.wheelDelta 를 이용해 휠 방향과 크기를 가져옴
      // 120=한 번 휠 이동단위-opera
      if(window.opera) delta = -delta;
      // opera 브라우저의 경우 방향을 반대로 처리
    }
    
   
    else if (event.detail){
     // 파이어 폭스 등에서는 event.detail 값을 사용하여 방향과 크기를 계산
      delta = -event.detail / 3;
       // 값이 음수이므로 부호를 반전하고 3으로 나눠 표준화
      // 3-파이어폭스 기본값
      
      // 브라우저마다 다르기 때문에 if문을 쓴 것
    }
    
    var moveTop = null;
    // 스크롤 이동 위치를 지정할 변수
    if(delta < 0){
      // 마우스 휠이 아래로 움직인 경우
      if($(this).next() !=undefined){
        // 현재 .page 요소의 다음 형제 요소가 존재하는지 확인
        moveTop = $(this).next().offset().top;
        // 다음 요소의 offset().top 값을 가져와 이동 위치(movetop)로 설정
      }
    }
    // 마우스 휠이 위로 움직인 경우 
    else {
      if ($(this).next() !=undefined){
        // 현재 .page 요소의 다음 형제 요소가 존재하는지 확인
        moveTop = $(this).prev().offset().top;
        // 다음 요소의 offset().top 값을 가져와 이동 위치(movetop)로 설정
      }
    }
    
    $('html,body')
    // 화면을 지정된 위치로 부드럽게 스크롤
    .stop()
    // 현재 실행 중인 다른 스크롤 애니메애션을 중단
    .animate({
      scrollTop:moveTop + 'PX'
    },
            300
             // 애니메애션 지속 시간
        );
  });
});

<주석 없는 버전>

$('.page').each(function(){
  $(this).on("mouseheel DOWNScroll",function(e){
    e.preventDefault();
    var delta = 0; 
    if (!event) event = window.event;

 
    if (event.wheelDelta){
      delta = event.wheelDelta / 120;
      if(window.opera) delta = -delta;
    }
    
    else if (event.detail){
      delta = -event.detail / 3;
    }
    
    var moveTop = null;
 
    if(delta < 0){
      
      if($(this).next() !=undefined){
        
        moveTop = $(this).next().offset().top;
     
      }
    }
   
    else {
      if ( $(this).next() !=undefined){
        moveTop = $(this).prev().offset().top;
       
      }
    }
    
    $('html,body')
    .stop()
    .animate({
      scrollTop:moveTop + 'PX'
    },
            300
           
            );
  });
});

---

<마우스 휠 페이지 이동 2>

console.clear();

var pages__noWorking = false;
// 현재 스크롤 애니메이션이 실행 중인지 확인

//해당 페이지로 부드럽게 가기 위함
function pages__goToScroll() {
  if (pages__noWorking) {
    return false;
    // 이미 스크롤 애니메이션 중이라면 중복 실행 방지
  }
  pages__noWorking = true;
  // 애니메이션 시작

  $("html,body")
    .stop()
    .animate(
      { scrollTop: top }, //스크롤 이동 위치 설정
      500, //애니메이션 지속 시간
      function () {
        pages__noWorking = false; // 애니메이션 종료 후 초기화
      }
    );
}

//특정 페이지(index)로 이동하는 함수
function Pages__goTo(index) {
  var $page = $("pages>div"); //모든 페이지 요소를 가져옴

  if (index < 0) {
    index = 0; //첫 페이지
  } else if (index >= $page.length) {
    index = $page.length - 1; //마지막 페이지(0~4 니까 -1을 한 것)
  }

  var top = $(".page > div").eq(index).attr("data-offsetTop");
  pages__goToScroll(top); //해당 페이지로 스크롤
}

var pages__activeMenuItem = -1;

//메뉴 항목 활성화 함수
function pages__activeMenuItem(index) {
  if (pages__activeMenuItem == index) {
    return false; // 이미 활성화 된 메뉴라면 처리하지 않음
  }

  pages__activeMenuItem = index; // 현재 활성화 된 메뉴 업데이트
  $(".top-bar > .pages-menu > ul> li.active").removeClass("active"); // 기존 활성화 제거
  $(".top-bar > .pages-menu > ul> li").eq(index).addClass("active"); // 새로운 활성화 설정
}

//페이지 크기 및 위치 정보 업데이트
function pages__updatePageShapeInfo() {
  $(".pages > div").each(function (index) {
    var width = $(this).width(); //페이지 너비
    var height = $(this).height(); //페이지 높이
    var offsetTop = $(this).offset().top; //페이지 상단 위치

    $(this).attr("data-width", width); //너비 지정
    $(this).attr("data-height", height); //높이 지정
    $(this).attr("data-offsetTop", offsetTop); //상단 위치 지정
  });
}

//초기화 함수
function Pages__init() {
  //메뉴 클릭시 해당 페이지로 이동
  $(".top-bar> .pages-menu > ul> li").click(function () {
    var index = $(this).index(); //클릭된 메뉴의 index 가져오기
    var top = parseInt($("pages > div").eq(index).attr("data-offsetTop")); //문자를 숫자로 바꿔줌(parseInt)
    pages_goToScroll(top); // 해당 위치로 이동
  });

  //페이지에서 마우스 휠 이벤트 처리
  $(".pages>div").on("mousewheel DOMMouseScroll", function (e) {
    var index = $(this).index();
    var E = e.originalEvent; //원래 이벤트 객체(묶음?) 가져오기
    var delta = E.delta ? E.delta * -40 : E.wheelDelta; 
    // 방향과 크기 계산(공식).삼항연산자 ㅁ(얘가) ? ㅁ(true일때 실행) : ㅁ(false일 때 실행)

    
    
    if (delta > 0) {
      Pages__goTo(index - 1); //이전 페이지로 이동
    } else {
      Pages__goTo(index + 1); //다음 페이지로 이동
    }
    return false; //기본 동작 막기
  });
  
  //스크롤 이벤트 처리
  $(window).scroll(function(){
    var scrollTop = $(this).scrollTop(); //현재 스크롤 위치
    $ ('.pages>div').each(function(index){
      var offsetTop = parseInt($(this).attr('data-offsetTop')); //페이지 상단 위치
      if (scrollTop <= offsetTop){
         pages__activeMenuItem(index); // 해당 페이지 메뉴 활성화
        return false; //첫 번째로 일치하는 페이지에서 종료
      }
        
    });
  });
  
  //창 크기 변경 시 페이지 정보 업데이트
  $(window).resize(function(){
    pages__updatePageShapeInfo(); //페이지 크기와 위치 정보 갱신
    $(window).scroll(); //스크롤 이벤트 재설정
  })
  .resize(); //초기실행
}

Pages__init();

attr 은 속성이다
href src와 같은