[Jquery] 마우스 휠& 드래그 이미지 zoom & translate _ 라이브러리X

참고 링크

 

 

 

웹 서핑을 하다 보면 마우스 휠로 줌 인 아웃 많이 해봤을꺼다.

 

라이브러리를 사용하지않은 코드 

 

😎 import

<script type="text/javascript" src="cdn/jquery-1.12.4.min.js"></script>

 

😎body

<div id="container">
  <div id="slide">
    <img src="https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg">
  </div>
</div>

😎css

#container{
  width:500px;
  height:300px;
  overflow:hidden;
}
#slide{
  width:100%;
  height:100%;
  transition: transform .3s;
}
img{
  width:auto;
  height:auto;
  max-width:100%;
  pointer-events: none;
}

 

😎script

$(document).ready(function (){
    var scroll_zoom = new ScrollZoom($('#container'),5,0.5)
})
 
//The parameters are:
//
//container: The wrapper of the element to be zoomed. The script will look for the first child of the container and apply the transforms to it.
//max_scale: The maximum scale (4 = 400% zoom)
//factor: The zoom-speed (1 = +100% zoom per mouse wheel tick)
 
function ScrollZoom(container,max_scale,factor){
    var target = container.children().first()
    var size = {w:target.width(),h:target.height()}
    var pos = {x:0,y:0}
    var scale = 1
    var zoom_target = {x:0,y:0}
    var zoom_point = {x:0,y:0}
    var curr_tranform = target.css('transition')
    var last_mouse_position = { x:0, y:0 }
    var drag_started = 0
 
    target.css('transform-origin','0 0')
    target.on("mousewheel DOMMouseScroll",scrolled)
    target.on('mousemove', moved)
    target.on('mousedown', function() {
        drag_started = 1;
        target.css({'cursor':'move', 'transition': 'transform 0s'});
        /* Save mouse position */
        last_mouse_position = { x: event.pageX, y: event.pageY};
    });
 
    target.on('mouseup mouseout', function() {
        drag_started = 0;
        target.css({'cursor':'default', 'transition': curr_tranform});
    });
 
    function scrolled(e){
        var offset = container.offset()
        zoom_point.x = e.pageX - offset.left
        zoom_point.y = e.pageY - offset.top
 
        e.preventDefault();
        var delta = e.delta || e.originalEvent.wheelDelta;
        if (delta === undefined) {
          //we are on firefox
          delta = e.originalEvent.detail;
        }
        delta = Math.max(-1,Math.min(1,delta)) // cap the delta to [-1,1] for cross browser consistency
 
        // determine the point on where the slide is zoomed in
        zoom_target.x = (zoom_point.x - pos.x)/scale
        zoom_target.y = (zoom_point.y - pos.y)/scale
 
        // apply zoom
        scale += delta * factor * scale
        scale = Math.max(1,Math.min(max_scale,scale))
 
        // calculate x and y based on zoom
        pos.x = -zoom_target.x * scale + zoom_point.x
        pos.y = -zoom_target.y * scale + zoom_point.y
 
        update()
    }
 
    function moved(event){
        if(drag_started == 1) {
            var current_mouse_position = { x: event.pageX, y: event.pageY};
            var change_x = current_mouse_position.x - last_mouse_position.x;
            var change_y = current_mouse_position.y - last_mouse_position.y;
 
            /* Save mouse position */
            last_mouse_position = current_mouse_position;
            //Add the position change
            pos.x += change_x;
            pos.y += change_y;
 
        update()
        }
    }
 
    function update(){
        // Make sure the slide stays in its container area when zooming out
        if(pos.x>0)
            pos.x = 0
        if(pos.x+size.w*scale<size.w)
            pos.x = -size.w*(scale-1)
        if(pos.y>0)
            pos.y = 0
        if(pos.y+size.h*scale<size.h)
            pos.y = -size.h*(scale-1)
 
        target.css('transform','translate('+(pos.x)+'px,'+(pos.y)+'px) scale('+scale+','+scale+')')
    }
}

 

이렇게 작성하면 이미지 줌 마우스 드래그로 이동 가능하다.

ScrollZoom함수 호출로 쉽게 해당 이미지 , 최대 확대비율 , 확대 속도 설정 가능하다.

줌해서 이미지를 다시 그리는데 contatiner에 오버플로우되는 부분을 히든 처리해서 zoom이 되는 듯한 효과룰 준다.

 

나는 이코드를 활용해 슬라이드 앨범 이미지를 줌 + 이동 해주고 확대배율을 출력해주었다.