javascript - 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)")
  })
})

代码看起来像这样，但最好看看它的实际效果

我在立方体上绑定(bind)了一个 mousewheel 事件，该事件触发一个函数，该函数将计数器增加 90(最初设置为 0)。如果您尝试仅执行一次此操作，计数器将超过 4000 左右。

此事件可能的解决方案有哪些？也许我可以让 mousewheel 事件变得更柔和？或者将其与另一个事件绑定(bind)。

我们将不胜感激您的帮助!

Answer 1

i 大于 4000 左右，因为鼠标滚轮上的每一步都会触发一次鼠标滚轮事件。因此，您可以在事件监听器中使用 setTimeout 来等待用户完成滚动，然后旋转您的图像。

$(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.
    })
})