jQuery 鼠标滚轮事件

Question

请看这个pen

$(function(){
  var i = 0;
  $('.container').bind('mousewheel',function(){
    var rotate = $(this).children("#cube");
    i+=90;
    $('span').text(i);
    rotate.css("transform","rotateX("+i+"deg)")
  })
})

代码看起来像这样，但最好还是看看实际操作

我在多维数据集上绑定了一个 mousewheel 事件，这个事件触发了一个函数，该函数将计数器增加 90（最初设置为 0）。如果你只尝试这样做一次，计数器将超过 4000 左右。

此事件可能的解决方案是什么？也许我可以通过某种方式让 mousewheel 事件更柔和一些？或者绑定其他事件。

我们将不胜感激！

Answer 1

i 超过 4000 左右，因为鼠标滚轮每走一步都会触发一次鼠标滚轮事件。因此，您可以在事件侦听器中使用 setTimeout 来等待用户完成 his/her 滚动然后旋转图像。

$(function(){
    var i = 0;
    var timeoutVar;
    $('.container').bind('mousewheel',function(){
        var self = this;
        if (timeoutVar) clearTimeout(timeoutVar); // if this event is fired with in 500ms, previous setTimeout will be cancelled..
        timeoutVar = setTimeout(function () {
            var rotate = $(self).children("#cube");
            i+=90;
            $('span').text(i);
            rotate.css("transform","rotateX("+i+"deg)")     
        }, 500); //adjust this timeout period based on your requirements.
    })
})

jQuery 鼠标滚轮事件

jQuery mousewheel event

javascript

jquery

mousewheel

jquery-events