8day - 영동군청 카피

sunghoon·2022년 8월 4일

포트폴리오 1.0 (~22.09.01)

목록 보기

18/27

Photo by Mike Dierken on Unsplash

1. 타겟

💡 금일 타겟 → 섹션 1 마무리

2. 과정

날씨 위젯 소스코드 사용 배경과 이질감이 있어서 opacitiy값을 추가함.

<!-- ==============날씨위젯==================  -->
<script>
    (function(d, s, id) {
        if (d.getElementById(id)) {
            if (window.__TOMORROW__) {
                window.__TOMORROW__.renderWidget();
            }
            return;
        }
        const fjs = d.getElementsByTagName(s)[0];
        const js = d.createElement(s);
        js.id = id;
        js.src = "https://www.tomorrow.io/v1/widget/sdk/sdk.bundle.min.js";

        fjs.parentNode.insertBefore(js, fjs);
    })(document, 'script', 'tomorrow-sdk');
</script>
<div class="tomorrow" data-location-id="065554" data-language="KO" data-unit-system="METRIC" data-skin="light" data-widget-type="aqiMini" style="padding-bottom:22px;position:relative;width: 300px;">
    <a href="https://www.tomorrow.io/weather/" rel="nofollow noopener noreferrer" target="_blank" style="position: absolute; bottom: 0; transform: translateX(-50%); left: 50%;">
        <img alt="Powered by Tomorrow.io" src="https://weather-website-client.tomorrow.io/img/powered-by-tomorrow.svg" width="140" height="0" />
    </a>
</div>
<!-- ==============날씨위젯==================  -->

콜백함수 문법, prepend(), append() 요소의 순서에 관한 문법 리마인드
- prepend append는 선택된 요소(this) 안에 메소드안에 요소를 넣는형식이고 To 가 사용되면 반대의 의미로 선택된 요소를 메소드 안의 요소에 넣는다.
무한 순차 슬라이드 진행시 순번이 바뀌기 때문에 css 적용이 어렵기 때문에 클래스로 수정하였습니다.

연속적으로 클릭할 때, 알파 슬라이드 이동과 위치 번호 순서 맞추기

/** 해결전/
function back(){ /* !!! stop()이 적용되지 않는다. */
    $(".main_slide li:last-child").stop().prependTo($(".main_slide ul")).css({"opacity":0}).animate({"opacity":1},300,function(){
    ms_no--;
    if(ms_no <= 0){ ms_no = 6}
    $(".main_slide .list_no").text(ms_no + "/" + (ms_last + 1));
    });
}

function go(){ 
    /* !!! 연속 클릭시 순서 번호가 안맞는다. 콜백함수에 있는데 왜 안맞지?*/
    /* finish() 를 사용하면 뒤에 있는 animate가 진행되지 않는다.*/
    $(".main_slide li:first-child")/*.finish()*/.animate({"opacity":0},300,function(){
    $(this).appendTo($(".main_slide ul")).css({"opacity":1});
    ms_no++;
    if(ms_no >=7){ ms_no = 1}    
    $(".main_slide .list_no").text(ms_no + "/" + (ms_last + 1));
    })
}

stop()과 finish() 기존의 동작을 제어하는데 back() 에서 애니메이션을 제외한 정적 매소드가 먼저 재생되어 stop이 적용되지 않았습니다
? go() 에서 animatiom의 콜백으로 연산자가 있는데 연속클릭시 숫자만 적용될까? → stop()과 finish는 남아있는 큐에 대한 매소드이기 때문에 콜백함수는 동일하게 적용된다.
finish() 의 콜백함수로 적용하면 뒤에 중복 적용했을 때 opacity가 바로 복귀된 상태에서 동적이 반복되니깐 해결되지 않을까? → 안된다..
stop 대신 off(”click”) off 이벤트를 제거하는 메소드 사용해보기 → off도 결국 stop과 같은 방식으로 적용된다

/* 해결 */
function back(){
    $(".main_slide li:last-child").prependTo($(".main_slide ul")).css({"opacity":0});
    $(".main_slide li:first-child").finish().animate({"opacity":1},300);
    ms_no--;
    if(ms_no <= 0){ ms_no = 6}
    $(".main_slide .list_no").text(ms_no + "/" + (ms_last));
}

function go(){
    $(".main_slide li:first-child").finish()
    ms_no++;
    if(ms_no >=7){ ms_no = 1}
    $(".main_slide .list_no").text(ms_no + "/" + (ms_last));
    $(".main_slide li:first-child").animate({"opacity":0},300,function(){
    $(this).appendTo($(".main_slide ul")).css({"opacity":1});
    })
}