확대/축소 슬라이더 동작 CSS/javascript

Question

자바 스크립트를 사용하여 원 슬라이더를 만들었으므로 확대 또는 축소하면 제대로 작동해야합니다.

내 문제는 원 슬라이더가 확대 된 경우입니다. (확대/축소 : 0.5), 슬라이더의 마우스 이벤트 리스너가 아마도 작동하지 않습니다.

이 문제는 줌 속성을 1보다 작거나 크게 설정 한 경우에만 발생합니다.

당신은 시도하고 차이를 볼 수 있습니다 https://jsfiddle.net/mqgfxkjf/8/

변경 :

<div style="zoom: 1.0"> 

사람 :

<div style="zoom: 0.5"> 

을 그리고 당신이 모든 슬라이더를 이동 권리하면서 행동 아니에요 것을 발견 할 것이다 -지도. 크롬

Answer 1

에서 테스트

당신은 줌 값에 따라 마우스 위치를 확장 할 수 있습니다.

확대/축소 값을 0.5으로 설정했다고 가정하면 마우스 위치 (x 및 y)를 같은 값으로 조정해야합니다. 따라서이 정확한 문제를 해결하려면 축척 값으로 나누는 것만 큼 간단하게 처리 할 수 ​​있습니다 (var mPos = {x: (e.clientX/0.5) - elPos.x, y: (e.clientY/0.5) - elPos.y };).

스크립트에서 스케일/줌 값을 처리하도록하여 스크립트의 변수로 설정할 수 있도록하는 것이 좋습니다. 나는. 이 같은 :

(function() { 
      var scaleValue = 0.5; 

    addZoom(scaleValue); 

    var $container = $('#container'); 
    var $slider = $('#slider'); 
    var sliderW2 = $slider.width()/2; 
    var sliderH2 = $slider.height()/2;  
    var radius = 200; 
    var deg = 0;  
    var elP = $('#container').offset(); 
    var elPos = { x: elP.left, y: elP.top}; 
    var X = 0, Y = 0; 
    var mdown = false; 
    $('#container') 
    .mousedown(function (e) { mdown = true; }) 
    .mouseup(function (e) { mdown = false; }) 
    .mousemove(function (e) { 
     if (mdown) { 
      var mPos = {x: (e.clientX/scaleValue) - elPos.x, y: (e.clientY/scaleValue) - elPos.y }; 
      var atan = Math.atan2(mPos.x-radius, mPos.y-radius); 
      deg = -atan/(Math.PI/180) + 180; // final (0-360 positive) degrees from mouse position 

      X = Math.round(radius* Math.sin(deg*Math.PI/180));  
      Y = Math.round(radius* -Math.cos(deg*Math.PI/180)); 
      $slider.css({ left: X+radius-sliderW2, top: Y+radius-sliderH2 });    
      // AND FINALLY apply exact degrees to ball rotation 
      $slider.css({ WebkitTransform: 'rotate(' + deg + 'deg)'}); 
      $slider.css({ '-moz-transform': 'rotate(' + deg + 'deg)'}); 
      // 
      // PRINT DEGREES    
      $('#value').html('angle deg= '+deg); 
     } 
    }); 
})(); 

function addZoom(scaleValue) { 
    $('#zoom-container').css('zoom', scaleValue); 
} 

바이올린 : https://jsfiddle.net/mqgfxkjf/10/