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


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 신고  댓글주소  수정/삭제  댓글쓰기

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

티스토리 툴바