3

我正在尝试将此 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，因为它仅检查滚动是向上还是向下。我想要它做的是将每个单独的滚动输出到变量 - 类似于滑块上方的画布图像模糊示例中如何动态调整模糊。

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

4

1 回答 1

1

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

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

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

实例：http: //jsfiddle.net/mKtvQ/2/

（注意：我没有包含模糊代码，因为您没有包含在 OP 中。）

于 2013-04-04T21:10:42.990 回答