jQuery 鼠標滾輪事件

Question

請看看這支筆

$(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 等待用戶完成他/她的滾動，然后旋轉您的圖像。

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