브라우저 제목

샘플1 http://comlearn.co.kr/project1/mobile/mousemove.html

샘플2 http://comlearn.co.kr/project1/mobile/index.html

샘플3 http://comlearn.co.kr/project1/mobile/mousemove1.html

드레그 mousedown,mouseup,mousemove

예제) 드레그 방향으로 요소이동

html

 

 

             <div class="wrap">
                <div class="section-wrap">
                    <div class="section">
                        <h3>섹션0</h3>
                    </div>
                    <div class="section">섹션1</div>
                    <div class="section">섹션2</div>
                    <div class="section">섹션3</div>
                </div>


            </div>
        

css

 

@charset "utf-8"; 
html,body{
    margin:0;
    height:100%;
    background:#eeeeee;
}

.wrap{
    width:100%;
    height:100%;
    
    position:relaive;
    float:left;
    
    overflow:auto;
    background:red;
     scrollbar-width:none;  /* fire-fox */
    -ms-overflow-style:none; /* ie and edge */
    
}
.wrap::-webkit-scrollbar{
  display:none;
}

.section-wrap{
    width:400%;
    height:100%;
    position:relative;
    left:0;
    
}

.section{
    width:25%;
    height:100%;
    float:left;
    background:yellow;
    position:relative;
    left:0;
    display:flex;
    justify-content: center;
    align-items: center;
    color:white;
    
}
.section>div{
    margin:20px;
}
.section:first-child{
    background:url(../images/background1.jpg) no-repeat center;
    background-size:cover;
    background-attachment: fixed;
}
.section:nth-child(2){
    background:url(../images/background2.jpg) no-repeat center;
    background-size:cover;
    background-attachment: fixed;
}
.section:nth-child(3){
    background:url(../images/background3.jpg) no-repeat center;
    background-size:cover;
    background-attachment: fixed;
}
.section:last-child{
    background:url(../images/background4.jpg) no-repeat center;
    background-size:cover;
    background-attachment: fixed;
}

 

js

 

$(function(){
    
    //섹션의 개수 
    var s_length=$(".section").length; 
    //섹션의 마지막 위치 값
    var last_left=$(".section:last-child").offset().left;
    //섹션의 너비
    var s_width=$(".section").width();
    console.log("섹션의 수" + s_length);
    console.log("섹션의 마지막 요소의 left "+last_left);
    console.log("섹션의 너비 "+s_width);
    var x_pos=0; //현재 위치 값 기억 변수
    var x=0; // 현재요소의 위치 이동 값 기억변수
    var drag=false; //요소를 눌렀을 때와 땠을 때의 판단
    
    //섹션(동작시킬 요소)을 눌렀을 때의 이벤트 처리
    $(".section").mousedown(function(e){
        
        x_pos=e.pageX;
        
         //눌렀다는 이벤트 결과를 전달하여 Move시킬 수 있도록 함
        drag=true;
        return false;
        
    });
    
    $(".section").mouseup(function(e){
        $(".mou-up").text("마우스에서 땠어요");
        //마우스를 땠을 때 Move이벤트 중지
        drag=false;
        return false;
    });
    
    $(".section-wrap").mousemove(function(e) {
        //마우스를 누르고 드레그 했음을 전달
        if(drag){
            // 요소의 위치에서 (현재의 위치-이벤트 발생 위치를 뺀값을 위치이동 값으로 저장 
            x=parseInt($(this).css("left"))-parseInt((x_pos-e.pageX));
            //현재의 위치에  다음에 발생할 이벤트 위치 계산하기 위한 저장
            x_pos=e.pageX;
            
            //요소의 left위치가 시작점 0인지 아니면 마지막 지점인지 찾는 질문
            if(x>=0){
                //첫번째 지점이면 더이상 움직이지 못하게
                x=0; //첫번째 지점 설정
                drag=false;
                 
            }else if(x<=-last_left){
                //마지막 지점이면 더이상 움직이지 못하게
                x=-last_left; //마지막 지점 설정
                drag=false      
             }
                //현재 요소를 left로 이동
                $(this).css({
                    left:x
                });

            }
        return false;
    });
   
});

 

애니메이션

 

$(function(){
    
    var s_length=$(".section").length;
    var last_left=$(".section:last-child").offset().left;
    var s_width=$(".section").width();
    console.log("섹션의 수" + s_length);
    console.log("섹션의 마지막 요소의 left "+last_left);
    console.log("섹션의 너비 "+s_width);
    var count=0;
    var x_pos=0;
    var x=0;
    var drag=false;
    var move=0;
    var pos=0;
    
    
    $(".section-wrap").mousemove(function(e) {
            
            if(drag){
                
                x=parseInt($(this).css("left"))-parseInt((x_pos-e.pageX));
                x_pos=e.pageX;

                if(x>=0){
                    x=0;

                }else if(x<=-last_left){
                    x=-last_left;
    
                 }
                    
                $(this).css({
                        left:x
                    });
                $(this).stop().animate({
                        left:count*s_width
                    });
                
                    
                    
                }
 
        return false;
    });

    $(".section").each(function(index){
       $(this).mousedown(function(e){
        console.log("x_pos : "+x_pos);
        console.log("e.pageX : "+e.pageX);
        pos=x_pos-e.pageX;
        console.log("포지션 위 : "+pos);
 
            if(pos<0){
                move=index+1;
                if(index>=3){
                   move=3; 
                }
            }else{
                move=index-1;
                if(index==0){
                    move=0;
                }
            }
            count=-1*move;

            x_pos=e.pageX;

            drag=true;
            return false;
        
        });
     
    });
    
    $(".section").mouseup(function(e){
        $(".mou-up").text("마우스에서 땠어요");
        drag=false;
        return false;
    });
});

제목 날짜
포트폴리오 샘플 2020.05.21
데스크탑, 모바일 구분 접속 2019.02.11
터치이벤트, pc환경과 모바일 환경 알아내기 file 2020.05.04
코르도바 를 설정하기 위한 방법 file 2020.04.26
sticky position file 2020.04.22
webfont file 2020.04.21
video file 2020.04.15
audio2 file 2020.04.15
audio 2020.04.11
wheel이벤트3 file 2020.04.11
wheel이벤트2 file 2020.04.11
wheel이벤트1 file 2020.04.11
드레그 앤 드롭 효과 예제 file 2020.04.03
드레그 앤 드롭 효과 원리 file 2020.04.03
슬라이드 페이지 네이션 file 2020.04.02
좌/우 슬라이드 슬라이드 개수처리, 너비 처리 file 2020.04.02
모바일 작업 file 2020.04.02
자격증 슬라이드 기본 2020.03.30
스크롤바 없에는 css 2020.03.30
터지이벤트와 mouseup, mousedown이벤트 2020.03.28
태그 목록