javascript - 即时放大/缩小

Question

我该如何设置，以便当您移动拖动器时缩放会立即改变？

https://jsfiddle.net/5ek6drwk/6/

  var svg = document.getElementsByTagName('svg')[0];
        var w = parseFloat(svg.getAttribute('width'));
        var h = parseFloat(svg.getAttribute('height'));

        document.getElementById('zoom').addEventListener('change',
          function() {
            document.getElementById('rv').textContent = this.value;
            svg.setAttribute('width', w + this.valueAsNumber);
            svg.setAttribute('height', h + this.valueAsNumber * h / w);
          }, false);

Answer 1

您可能需要使用 input 而不是 change，因为 input 会在范围 slider 的值立即更改后调用您的函数，而change只会调用它当用户提交该值时。

https://developer.mozilla.org/en-US/docs/Web/Events/input

所以试试这个:

document.getElementById('zoom').addEventListener('input', ...