사실 이런 슬라이딩 효과를 내는 플러그인도 많습니다만...


cafe24 쇼핑몰에는 플러그인을 함부로 넣으면 jquery가 동작을 안하므로... -_-;


직접 구현했습니다.


슬라이딩 되는 부분에 임의의 빈 이미지를 넣어서 구현한 예제는 다음과 같습니다.


http://zoahaza.dothome.co.kr/blogupload/p150523_bimilbottari_timemovingtest.html


마우스를 갖다 대면 움직이던 것이 멈추고, 마우스를 다시 밖으로 가져가면 다시 움직이는 것을 보실 수 있습니다.


이 예제에서 가장 중요한 것은 다음 js 파일입니다.



이 파일의 소스코드는 다음과 같습니다.


$(document).ready(function(){

listswap();

});


function listswap(){ // Yeseul 추가 함수

    var listswap001_r_val = 550;

    var $listswap001_r_interval1 = "NULL";

    var listswap001_r_index = 0;

    var $listswap001_r_object = $("#timemoving .ys_custom_selector li").find(".selected");


    

    $("#timemoving").mouseenter(function(){

        clearInterval($listswap001_r_interval1);   

        $(this).find(".ys_custom_selector li").mouseenter(function(){

            listswap001_r_index = $(this).index();

            $listswap001_r_object = $(this);

            loop_function_listswap001();

        });

    });

    

    $("#timemoving").mouseleave(function(){

        loop_interval_listswap001();

    });

    

    function loop_interval_listswap001(){

        $listswap001_r_interval1 = setInterval(function(){

            listswap001_r_index++;

            loop_function_listswap001();

        }, 3500);

    };

    

    function loop_function_listswap001(){

        $listswap001_r_object = $("#timemoving .ys_custom_selector li").eq( listswap001_r_index );

        

        $("#timemoving .ys_custom_selector li").removeClass("selected");

        $listswap001_r_object.addClass("selected");

        

        $("#timemoving ul").stop().animate({

            left : -1 * listswap001_r_index * listswap001_r_val

        },800);

    

        if(listswap001_r_index>=2){

            listswap001_r_index=-1;

        }

    };

    

    loop_interval_listswap001();

};


가장 중요한 것은 함수 listswap()의 구조입니다.


이 함수를 조금만 응용하면 자유자재로 슬라이딩 뿐 아니라 투명해졌다가 서서히 나타나는 효과 등 화면 전환 효과와 관련된 거의 모든 효과를 이 함수만으로 복사+붙여넣기 하여 구현이 가능합니다. 물론 DOM은 건드려야 겠지요.


이 함수를 응용해서 쇼핑몰을 만들었으므로, 다음 사이트에서 확인이 가능하십니다.


bimilbottari.com


사실 이 함수를 만든 이유는 제 자신을 위해서이기도 합니다. 이런 시간차에 따른 애니메이션 기능을 하는 부분이 처음에는 별로 없었는데 회사의 요구로 인해 계속 추가되고 있거든요...





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. 신기한별 2015.06.12 09:58 신고  댓글주소  수정/삭제  댓글쓰기

    프로그래밍 관련 내용이네요.. 잘 보고 갑니다.

  2. 빌노트 2015.06.12 11:12 신고  댓글주소  수정/삭제  댓글쓰기

    프로그래밍 실력이 점점 느시는 것 같아요.
    나중에는 정말 고수가 되실듯!

  3. 핑구야 날자 2015.06.12 20:30 신고  댓글주소  수정/삭제  댓글쓰기

    보고싶은 랭귀지 네요 vb를사용해요 ㅋㅋ

    • 책덕후 화영 2015.06.12 20:34 신고  댓글주소  수정/삭제

      vb면 비주얼베이직 아닌가요??? 이 포스팅의 코드에 쓰인 언어는 자바스크립트(엄밀히 말하면 jQuery라이브러리)입니다. ^^ 보통 html, css와 같이 한묶음으로 쓰이죠.

  4. 상상람쥐 2015.06.12 23:31 신고  댓글주소  수정/삭제  댓글쓰기

    우와!! 저도 이 분야에 대해 배우고 있는데 멋지세요!!

티스토리 툴바