[DAY - 50] #2 모바일 예제(CJ 푸드빌)

.main .brand .brand-article {
    width: 100%;
}
.main .brand .brand-article .swiper-slide {
    display: block;
    /* margin-bottom: 40px; */
}
.main .brand .brand-article img {
    width: 320px;
    margin: 0 auto;
}
.main .brand .brand-article .brand-txt {
    margin-top: 80px;
}
.main .brand .brand-article .brand-txt strong {
    font-size: 25px;
    font-weight: 700;
    color: tomato;
}
.main .brand .brand-article .brand-txt p {
    font-size: 15px;
    margin-bottom: 25px;
    margin-top: 15px;
}
.main .brand .brand-list .swiper-pagination {
    bottom: 170px;
}

 

    $newsTab.forEach((news, idx)=>{
        news.addEventListener('click', e=>{
            $newsTab.forEach(item=>{
                item.classList.remove('on');    
            })
            e.currentTarget.classList.add('on');
            $newsBox.forEach(item=>{
                item.classList.remove('on');    
            })
            $newsBox[idx].classList.add('on');
        })
    })

 

보도자료, 공지사항, 인재채용을 누르면 on class가 add, remove 되도록 했다.

 

 

    let familysite = false;
    $familyBtn.addEventListener('click',e=>{
        if(!familysite){
            $familyList.classList.add('on')
            $familyBtn.className = 'xi-angle-up';
            familysite = !familysite
        } else {
            $familyList.classList.remove('on')
            $familyBtn.className = 'xi-angle-down';
            familysite = !familysite
        }
    })

 

패밀리사이트의 경우 event 함수 하나로 사용하기 위해 상태변수를 사용했다.

꺽쇠 아이콘은 클래스 명을 직접 바꾸어 다르게 나오도록 했다.

 

    $goTop.addEventListener('click',e=>{
        window.scrollTo({
            top: 0,
            behavior: "smooth"
          });
    })

 

gotop 버튼은 클릭 시 페이지 가장 위로 스크롤이 이동한다.

 

    let step = 1;
    let tx = 0;
    let size = parseInt(getComputedStyle($brandLogoLi).width) * -7;
    let leftx;

    setInterval(() => {
        leftx= parseInt(getComputedStyle($brandLogoUl).left);
        if(leftx<= size){
            $brandLogoUl.style.left = '-4px';
            tx = -4;
        } else {
            tx -= step;
            $brandLogoUl.style.left = `${tx}px`
        }
    }, 10);

 

가로로 이동하는 베너의 경우 ul의 left 값을 -1px씩 이동하도록 하고, li를 중복되게 html에서 작성하여 다음 중복 li가 나올 때 다시 left = 0으로 돌아오도록 했다.