计数每个鼠标滚轮滚动并输出到一个变量

Question

我尝试将这个jQuery MouseWheel插件和这个Canvas Image Blur插件一起使用，以便使用鼠标滚轮(而不是真正滚动页面)使全屏图像变得模糊或重新聚焦。

我已经玩了几个小时了，但是我一点运气都没有。我目前拥有的代码是：

$(document).mousewheel(function(event, delta) {
                        var o = 70;
                        if (delta > 0)
                            o = o+1;
                        else if (delta < 0)
                            o = o-1;

                        if( o != '' )
                            log( o );
                        return false; // prevent default
                    });

                function log(blurRadius) {
                    stackBlurImage( 'photosrc', 'canvas', blurRadius, false );
                };

我希望图像从模糊设置为70开始。但此代码当前仅根据滚动将其更改为69或71，因为它只检查向上或向下的滚动。我想要它做的是输出每个单独的滚动到变量-类似于上面的画布图像模糊示例中滑块如何动态调整模糊。

如果有人能为我指明正确的方向，我将不胜感激！

Answer 1

您只需将变量声明(var o = 70)移到函数外部。

如果变量是在鼠标滚轮的事件处理程序中声明的，则每次发生事件时都会重置该变量。如果您在外部声明它，它将在页面加载后声明，然后在每个事件中更改为+1或-1。

您还可以将o = o + 1;更改为o++;，以使您的代码更简单。

实际操作示例：http://jsfiddle.net/mKtvQ/2/

(注意:我没有包含模糊代码，因为您没有将其包含在操作中。)