본문 바로가기
TIL/Today I Learned

[Develop] 23.06.15 개발 공부 일지

by 임성장 2023. 6. 15.
728x90

요약: 마우스휠을 이용한 슬라이드, 굽네 회원가입 페이지 제작

일시: 23.06.15 09:30 ~ 18:20

장소: 더휴먼컴퓨터아트아카데미, 집

배운 점:

 Jquery

-슬라이드1

// 휠이벤트 발생시 반환값 확인하기 위한 변수
let wheelDelta = 0;
let browser = 0;

// 1. 섹션 8개 배열
// 2. 마우스휠을 아래로(-120) 다음 섹션으로 스크롤이벤트 발생
// 3. 마우스휠을 위로(+120) 이전 섹션으로 스크롤이벤트 발생
// 4. browser[Event-mousewheel]: 크롬, 익스, 사파리, 오페라 등등
// 5. browser[Event-DOMMouseScroll]: 파이어폭스
// 6. 파이어 폭스 마우스휠을 아래로(-3) 위로(+3)
// 7. 파이어 폭스 브라우저 판별 == window.navigator.userAgent

$('.section').each(function(index){
    $(this).on('mousewheel DOMMouseScroll', function(e){
        e.preventDefault();
        browser = window.navigator.userAgent.toLowerCase().indexOf('firefox');
        if(browser >= 0){
            wheelDelta = -(e.detail*40);
        }else{
            wheelDelta = e.originalEvent.wheelDelta;
        }

        if(wheelDelta < 0){
            if(index < $('.section').length - 1){
                $('html, body').stop().animate({scrollTop: $(this).next().offset().top}, 500)
            }
        }else{
            if(index > 0 ){
                $('html, body').stop().animate({scrollTop: $(this).prev().offset().top}, 500)
            }
        }
    })
})
// 휠이벤트 발생시 반환값 확인하기 위한 변수
let wheelDelta = 0;
let browser = 0;

// 1. 섹션 8개 배열
// 2. 마우스휠을 아래로(-120) 다음 섹션으로 스크롤이벤트 발생
// 3. 마우스휠을 위로(+120) 이전 섹션으로 스크롤이벤트 발생
// 4. browser[Event-mousewheel]: 크롬, 익스, 사파리, 오페라 등등
// 5. browser[Event-DOMMouseScroll]: 파이어폭스
// 6. 파이어 폭스 마우스휠을 아래로(-3) 위로(+3)
// 7. 파이어 폭스 브라우저 판별 == window.navigator.userAgent

$('.section').each(function(index){
    $(this).on('mousewheel DOMMouseScroll', function(e){
        e.preventDefault();
        browser = window.navigator.userAgent.toLowerCase().indexOf('firefox');
        if(browser >= 0){
            wheelDelta = -(e.detail*40);
        }else{
            wheelDelta = e.originalEvent.wheelDelta;
        }

        if(wheelDelta < 0){
            if(index < $('.section').length - 1){
                $('html, body').stop().animate({scrollLeft: $(this).next().offset().left}, 500)
            }
        }else{
            if(index > 0 ){
                $('html, body').stop().animate({scrollLeft: $(this).prev().offset().left}, 500)
            }
        }
    })
})
let cnt = 0;
let n = jQuery('.slide').length - 1;
let delta = 0; // 휠 델타값
let t = 0; // 마우스 휠 토글 변수
let z = 0; // cnt를 기준으로 이전 다음
let setintervalID;

$('.arrowNextBt').on('click', function(){
    nextCountfn()
})

$('.arrowPrevBt').on('click', function(){
    prevCountfn()
})

// 자동슬라이드
autoplay();
function autoplay(){
    setintervalID = setInterval(nextCountfn,3000)
}

// 일시정지
$('#section1').hover(function(){
    clearInterval(setintervalID);
    mouseWheelEventFn()
}, function(){
    autoplay();
})

$('.slide-wrap').swipe({
    swipeLeft: function(){
        nextCountfn()
    },
    swipeRight: function(){
        prevCountfn()
    }
})

// 마우스 휠 이벤트 함수
function mouseWheelEventFn(){
    $('#section1').on('mousewheel DOMMouseScroll', function(e){
        e.preventDefault();
        if(e.originalEvent.detail){ // 파이어폭스
            delta = -e.originalEvent.detail * 40
        }else if(e.originalEvent.wheelDelta){ // 파이어폭스 제외
            delta = e.originalEvent.wheelDelta
        }

        if(t==0){
            t = 1;
            if(delta < 0){
                nextCountfn()
            }else{
                prevCountfn()
            }
            setTimeout(function(){
                t = 0
            }, 100)
        }
    })
}

// 다음으로 이동
function nextCountfn() {
    cnt++;
    if (cnt > n) { cnt = 0; }
    z = (cnt == 0 ? n : cnt - 1)
    console.log("🚀 ~ file: script.js:19 ~ nextCountfn ~ z:", z)
    mainNextSlidefn();
}

// 이전으로 이동
function prevCountfn() {
    cnt--;
    if (cnt < 0) { cnt = n; }
    z = (cnt == n ? 0 : cnt + 1)
    mainPrevSlidefn();
}

// 페이지 네이션
function pageBtfn(){
    $('.pageBt').removeClass('addpageBt');
    $('.pageBt').eq(cnt).addClass('addpageBt');
}

$('.pageBt').each(function(index){
    $(this).on('click', function(){
        if(cnt < index){
            z = cnt
            cnt = index
            mainNextSlidefn()
        }else if(cnt > index){
            z = cnt
            cnt = index
            mainPrevSlidefn()
        }
    })
})

// 메인 슬라이드 다음슬라이드 함수
function mainNextSlidefn() {
    pageBtfn()
    // li에 animate가 없으면
    if (!($('.slide li').is(':animated'))) {
        // 모든 .slide(li)의 z-index를 1로 변경하고, 그 아래 li(4개)들의 너비를 25%로 만듦
        $('.slide').css({ zIndex: 1 }).find('li').animate({ width: (25 * 1) + '%' }, 0)

        $('.slide').eq(z).css({ zIndex: 2 }).find('li').animate({ width: (25 * 1) + '%'}, 0)
        $('.slide').eq(cnt).css({ zIndex: 3 }).find('li').animate({ width: (25 * 0) + '%' }, 0).animate({ width: (25 * 1) + '%' }, 800)
    } else {
        return false
    }
}

// 메인 슬라이드 이전슬라이드 함수
function mainPrevSlidefn() {
    pageBtfn()
    if (!($('.slide li').is(':animated'))) {
        $('.slide').css({ zIndex: 1 }).find('li').animate({ width: (25 * 1) + '%' }, 0)
        $('.slide').eq(z).css({ zIndex: 3 }).find('li').animate({ width: (25 * 1) + '%' }, 0).animate({ width: (25 * 0) + '%' }, 800)
        $('.slide').eq(cnt).css({ zIndex: 2 }).find('li').animate({ width: (25 * 1) + '%' }, 0)
    } else {
        return false
    }
}
// 휠이벤트 발생시 반환값 확인하기 위한 변수
let wheelDelta = 0;
let browser = 0;

// 1. 섹션 8개 배열
// 2. 마우스휠을 아래로(-120) 다음 섹션으로 스크롤이벤트 발생
// 3. 마우스휠을 위로(+120) 이전 섹션으로 스크롤이벤트 발생
// 4. browser[Event-mousewheel]: 크롬, 익스, 사파리, 오페라 등등
// 5. browser[Event-DOMMouseScroll]: 파이어폭스
// 6. 파이어 폭스 마우스휠을 아래로(-3) 위로(+3)
// 7. 파이어 폭스 브라우저 판별 == window.navigator.userAgent

$('.section').each(function(index){
    $(this).on('mousewheel DOMMouseScroll', function(e){
        e.preventDefault();
        browser = window.navigator.userAgent.toLowerCase().indexOf('firefox');
        if(browser >= 0){
            wheelDelta = -(e.detail*40);
        }else{
            wheelDelta = e.originalEvent.wheelDelta;
        }

        if(wheelDelta < 0){
            if(index < $('.section').length - 1){
                $('html, body').stop().animate({scrollLeft: $(this).next().offset().left}, 500)
            }
        }else{
            if(index > 0 ){
                $('html, body').stop().animate({scrollLeft: $(this).prev().offset().left}, 500)
            }
        }
    })
})
let cnt = 0;
let n = jQuery('.slide').length - 1;
let delta = 0; // 휠 델타값
let t = 0; // 마우스 휠 토글 변수
let z = 0; // cnt를 기준으로 이전 다음
let setintervalID;

$('.arrowNextBt').on('click', function(){
    nextCountfn()
})

$('.arrowPrevBt').on('click', function(){
    prevCountfn()
})

// 자동슬라이드
autoplay();
function autoplay(){
    setintervalID = setInterval(nextCountfn,3000)
}

// 일시정지
$('#section1').hover(function(){
    clearInterval(setintervalID);
    mouseWheelEventFn()
}, function(){
    autoplay();
})

$('.slide-wrap').swipe({
    swipeLeft: function(){
        nextCountfn()
    },
    swipeRight: function(){
        prevCountfn()
    }
})

// 마우스 휠 이벤트 함수
function mouseWheelEventFn(){
    $('#section1').on('mousewheel DOMMouseScroll', function(e){
        e.preventDefault();
        if(e.originalEvent.detail){ // 파이어폭스
            delta = -e.originalEvent.detail * 40
        }else if(e.originalEvent.wheelDelta){ // 파이어폭스 제외
            delta = e.originalEvent.wheelDelta
        }

        if(t==0){
            t = 1;
            if(delta < 0){
                nextCountfn()
            }else{
                prevCountfn()
            }
            setTimeout(function(){
                t = 0
            }, 100)
        }
    })
}

// 다음으로 이동
function nextCountfn() {
    cnt++;
    if (cnt > n) { cnt = 0; }
    z = (cnt == 0 ? n : cnt - 1)
    console.log("🚀 ~ file: script.js:19 ~ nextCountfn ~ z:", z)
    mainNextSlidefn();
}

// 이전으로 이동
function prevCountfn() {
    cnt--;
    if (cnt < 0) { cnt = n; }
    z = (cnt == n ? 0 : cnt + 1)
    mainPrevSlidefn();
}

// 페이지 네이션
function pageBtfn(){
    $('.pageBt').removeClass('addpageBt');
    $('.pageBt').eq(cnt).addClass('addpageBt');
}

$('.pageBt').each(function(index){
    $(this).on('click', function(){
        if(cnt < index){
            z = cnt
            cnt = index
            mainNextSlidefn()
        }else if(cnt > index){
            z = cnt
            cnt = index
            mainPrevSlidefn()
        }
    })
})

// 메인 슬라이드 다음슬라이드 함수
function mainNextSlidefn() {
    pageBtfn()
    // li에 animate가 없으면
    if (!($('.slide li').is(':animated'))) {
        // 모든 .slide(li)의 z-index를 1로 변경하고, 그 아래 li(4개)들의 너비를 25%로 만듦
        $('.slide').css({ zIndex: 1 }).find('li').animate({ width: (25 * 1) + '%' }, 0)

        $('.slide').eq(z).css({ zIndex: 2 }).find('li').animate({ width: (25 * 1) + '%'}, 0)
        $('.slide').eq(cnt).css({ zIndex: 3 }).find('li').animate({ width: (25 * 0) + '%' }, 0).animate({ width: (25 * 1) + '%' }, 800)
    } else {
        return false
    }
}

// 메인 슬라이드 이전슬라이드 함수
function mainPrevSlidefn() {
    pageBtfn()
    if (!($('.slide li').is(':animated'))) {
        $('.slide').css({ zIndex: 1 }).find('li').animate({ width: (25 * 1) + '%' }, 0)
        $('.slide').eq(z).css({ zIndex: 3 }).find('li').animate({ width: (25 * 1) + '%' }, 0).animate({ width: (25 * 0) + '%' }, 800)
        $('.slide').eq(cnt).css({ zIndex: 2 }).find('li').animate({ width: (25 * 1) + '%' }, 0)
    } else {
        return false
    }
}
728x90

'TIL > Today I Learned' 카테고리의 다른 글

[Develop] 23.06.19 개발공부일지  (0) 2023.06.20
[Develop] 23.06.16 개발 공부 일지  (0) 2023.06.17
[Develop] 23.06.14 개발 공부 일지  (0) 2023.06.14
[Develop] 23.06.13 개발 공부 일지  (0) 2023.06.14
[Develop] 23.06.12 개발 공부 일지  (0) 2023.06.12

관련글

티스토리툴바