Question

我使用JavaScript创建了一个圆形滑块，如果它放大或缩小，我需要它才能正常工作。

我的问题是当圆形滑块放大时，例如。（缩放：0.5），滑块的鼠标事件监听器可能不起作用。

仅当我将zoom属性设置为小于或大于1时才会出现此问题。

您可以尝试查看差异：https://jsfiddle.net/mqgfxkjf/8/

变化：

<div style="zoom: 1.0">

致：

<div style="zoom: 0.5">

你会发现在将滑块移动到所有方向时它不能正常工作。

在Chrome上测试

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/

缩放更改滑块行为css / javascript

1 个答案: