Question

我正在进行需要进行某种屏幕校准的项目。

此校准的工作方式是按下加号按钮＆＃34;信用卡＆＃34;放大并按下减号按钮时缩小0.5毫米。

一切正常，但点击按钮＆＃34;信用卡＆＃34;只是放大或缩小0.5毫米，所以我需要继续点击进一步更改缩放。我希望在按下鼠标键时缩放是恒定的，并在释放时停止缩放。

有我的JavaScript代码：

var c = document.querySelector('.card'),
m = document.querySelector('.m'),
p = document.querySelector('.p'),
s = document.querySelector('.s'),
r = document.querySelector('.r'),
w = c.style.width = '54mm';

m.addEventListener('click', function() {
w = c.style.width = parseFloat(w) - 0.5 + 'mm';
});

p.addEventListener('click', function() {
w = c.style.width = parseFloat(w) + 0.5 + 'mm';
});

s.addEventListener('click', function() {
r.innerHTML = 54 / parseFloat(w);
});

您可以查看JSFiddle以查看我现在使用的代码。有人可以帮助我将这个功能集成到现有代码中吗？

Answer 1

您需要设置一些有点不同的事件监听器。这是我的解决方案 - 我相信它非常清楚：

var c = document.querySelector('.card'),
    m = document.querySelector('.m'),
    p = document.querySelector('.p'),
    s = document.querySelector('.s'),
    r = document.querySelector('.r'),
    w = c.style.width = '54mm';

var min = false;
var max = false;

m.addEventListener('mousedown', function(event) {
      min = true;
});

m.addEventListener('mouseup', function(event) {
    min = false;
});

p.addEventListener('mousedown', function() {
    max = true;
});

p.addEventListener('mouseup', function() {
    max = false;
});

s.addEventListener('click', function() {
    r.innerHTML = 54 / parseFloat(w);
});

setInterval(function() {
    if(min) {
        w = c.style.width = parseFloat(w) - 0.5 + 'mm';
    }
}, 100);

setInterval(function() {
    if(max) {
        w = c.style.width = parseFloat(w) + 0.5 + 'mm';
    }
},100);

按下鼠标键时保持缩放（或缩小）

1 个答案: