ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 좌우로 슬라이드(vertical slide)
    컴터/Javascript / html 2014. 10. 10. 19:10

    많이들 사용하는 가로로 슬라이드?? 뭐라 이름이 좀 모르는데 아래 그림 참고.

    간단히 움직임만 따라해봄.




    데모 : http://whatdo.net/html5/example/verticalSlide.html




    예제.html




    js 코드


    /*

    - 가로로 움직이는 갤러리

    @params : 옵션이며 없다면 기본값으로 적용됨

    target : 움직일 부모 객체 (css selector default : .vertical_motion)

    mover : 마우스오버할 target 의 '자식' 객체 (css selector default : .vm_list)


    @html data-* : 옵션이며 없다면 기본값으로 적용됨

    data-min : 최소넓이값(string numberic type default : "130") 

    data-motion-auto : 자동으로 움직일것인가? (string default : "true" ... or "false") 

    data-delay : 모션후 멈춤 시간 (string numberic type default : "3" per second)

    data-speed : 모션 동작 속도 (numberic type defalut : "200" pe millisecond)

    data-start-index : 몇번째 박스부터 시작 할 것인가?(numberic type default : 0) - 0부터 시작함


    @sample

    ul.vertical_motion, li.vm_list 의 타겟 class 는 기본으로 세팅되어 있으며 다른 것으로 하고 싶다면 

    vm.setTarget("option1","option2") 또는 verticalMotion("option1","option2").exe()로 정의함.


    <style>

    .vertical_motion{margin:0;padding:0;list-style:none;}

    .vertical_motion .vm_list{float:left;margin-right:5px;overflow:hidden;}

    .vertical_motion .vm_list img{vertical-align:middle}

    .vertical_motion .vm_list.last{margin-right:0}

    </style>

    <ul class="height_auto vertical_motion" data-min="130" data-motion-auto="true" data-delay="3" data-speed="200" data-start-index="0">

    <li class="vm_list">1번째 박스</li>

    <li class="vm_list">2번째 박스</li>

    <li class="vm_list">3번째 박스</li>

    <li class="vm_list">4번째 박스</li>

    </ul>

    */

    function verticalMotion(target, mover){

    if(!(this instanceof verticalMotion)) return new verticalMotion();


    this.target = target||".vertical_motion";

    this.$target = null;

    this.mover = mover||".vm_list";

    this.$mover = null;


    this.vars={

    rmargin:0

    ,fwidth:null

    ,min:130

    ,mauto:true

    ,delay:1

    ,speed:200

    ,index:0

    ,si:{}

    };


    return this;

    }


    verticalMotion.prototype={

    // 스크립트로 옵션설정

    set:function(key, val){

    this.vars[key] = val;

    return this;

    }


    // 타겟 새로 세팅

    ,setTarget:function(target, mover){

    if(!target) return this;

    this.target = target;


    if(mover) this.mover = mover;


    return this.exe();

    }


    // 움직임

    ,motion:function(opts, current){

    opts.$mover.stop().animate({"width":opts.min+"px"}, opts.speed).removeClass("on").filter(current).stop().animate({"width":opts.max+"px"}, opts.speed).addClass("on");


    return this;

    }


    // 자동

    ,autoMotion:function(opts){

    var parents=this;

    parents.vars.si[opts.rand]=setInterval(function(){ 

    parents.motion(opts, opts.$mover.eq(opts.index));

    opts.index++;

    if(opts.index>=opts.len) opts.index=0;

    }, opts.delay);


    return this;

    }


    // 해당 모션의 옵션 가져오기

    ,exe:function(){

    var parents = this

    ,vars = parents.vars

    ,$targets = $(parents.target);


    if($targets.length<=0) return false;

    $.each($targets, function(i, ele){

    var $target = $(ele)

    ,$mover = $target.find(parents.mover)

    ,opts={

    $target:$target

    ,$mover:$mover

    ,rmargin : Number($mover.eq(0).css("margin-right").replace("px",""))||vars.rmargin

    ,fwidth : Number($target.innerWidth()||($target.parent().innerWidth())) // 값이 없다면 부모객체의 넓이가 기준이 됨

    ,min : Number($target.attr("data-min"))||vars.min

    ,mauto : $target.attr("data-motion-auto") ? $target.attr("data-motion-auto")=="true" : vars.mauto

    ,delay : (Number($target.attr("data-delay"))||vars.delay)*1000

    ,speed : (Number($target.attr("data-speed"))||vars.speed)

    ,index : (Number($target.attr("data-start-index"))||vars.index)

    ,rand:"r_"+Math.round(Math.random()*1000)

    ,max:null

    ,len:null

    };


    parents.setDisplay(opts);

    });


    return this;

    }


    // 옵션에 따라 객체 자리잡음

    ,setDisplay:function(opts){

    if(!opts.$target || !opts.$mover){

    alert("이벤트를 처리할 타겟을 지정해 주세요.");

    return this;

    }


    var parents = this 

    ,len = opts.$mover.length

    ,min = opts.min

    ,lenm = len-1

    ,max = opts.fwidth-(((lenm)*min) + (opts.rmargin*lenm))

    ,si = null;

    opts.max=max;

    opts.len = len;

    opts.$mover.css("width",min+"px").eq(opts.index).css("width", max+"px").end().last().addClass("last")

    .end().off().on({

    mouseenter:function(){

    if(parents.vars.si[opts.rand]) clearInterval(parents.vars.si[opts.rand]);


    opts.index=opts.$mover.index(this);

    parents.motion(opts, this);

    }

    ,mouseleave:function(){

    if(opts.mauto===true) parents.autoMotion(opts);

    }

    });

    if(opts.mauto===true) parents.autoMotion(opts); // motion auto라면

    //if(opts.index>0) parents.motion(opts, opts.$mover.eq(opts.index)); // start-index 가 있다면

    return this;

    }

    };



    $(function(){

    verticalMotion.exe();

    });



    html 샘플



    <!-- 샘플1 - 기본 -->

    <ul class="height_auto vertical_motion" data-min="130" data-motion-auto="true" data-delay="3" data-speed="200">

    <li class="height_auto vm_list">

    <a href="http://daum.net">

    <div class="sp_box b1">

    <h2 class="spb_t">슬라이드1</h2>

    <hr class="spb_h" />

    </div>

    </a>

    </li>

    <li class="vm_list">

    <a href="http://daum.net">

    <div class="sp_box b2">

    <h2 class="spb_t">슬라이드2</h2>

    <hr class="spb_h" />

    </div>

    </a>

    </li>

    <li class="vm_list">

    <a href="http://daum.net">

    <div class="sp_box b3">

    <h2 class="spb_t">슬라이드3</h2>

    <hr class="spb_h" />

    </div>

    </a>

    </li>

    <li class="vm_list">

    <a href="http://daum.net">

    <div class="sp_box b4">

    <h2 class="spb_t">슬라이드4</h2>

    <hr class="spb_h" />

    </div>

    </a>

    </li>

    </ul>

    <!-- //... -->



    댓글 0

Designed by Tistory.