0

我在这里使用 iosSlider 显示艺术品：http: //artiris.clients.twi.tl/galeries/galerie-bleue

我希望为中心之外的作品添加一个模糊滤镜。尽管该插件没有“活动”类设置，但我可以轻松地添加一个具有简单功能的类设置。

这是棘手的部分。我希望模糊过渡进出。不是时间值，而是我希望过渡与滑块运动相关联。例如，当艺术品接近中心时，模糊值将与运动相关联，当艺术品位于中心时，模糊值将为 0。我想要这个，因为滑块支持触摸。

滑块对象确实提供了它的实时位置，因此我可以确定要设置的模糊值。但是，为此编写一个 do/while 循环，浏览器就会崩溃。还有 onSlideStart 和 onSlideComplete 事件，但我不知道如何在一个事件上执行函数并在另一个事件上停止它。

总而言之，我只需要有人引导我朝着正确的方向前进，让我能够干净有效地做到这一点。

谢谢

4

3 回答 3

1

除非您有某种“onDrag”事件不断发生，否则我只能想到两种方法来处理这个问题。

第一个：setTimeout每毫秒左右运行一次，它会调整模糊。这几乎可以肯定不是一个好的选择，但在技术上它是一个选择。这可能会导致性能问题，尤其是在低速设备上。这也意味着模糊可能是不稳定的，因为超时实际上可能不会每毫秒运行一次。

正如您在评论中所建议的那样，您不能为其使用循环并根据事件启用/禁用循环，因为 javascript 是单线程的：一旦循环开始，将不再运行其他 javascript，您将始终锁定您的浏览器。

第二：只有 CSS 的解决方案。如果移动只是 CSS，那么幸运的话，模糊可以以相同的方式完成。遗憾的是，我不是 CSS 专家，所以我不确定最好的方法。

抱歉，这不是您问题的一个很好的答案，但我想为您解释 javascript 选项，以及您可能不应该这样做的原因。

于 2012-12-11T21:59:25.103 回答
1

iosSlider 开发报告提供了一些见解。

您可以在 iosSlider 插件的 touchmove 事件中添加自己的函数。然后，此函数将与 iosSlider 拖动一起触发。我建议将它放在第 1806 行之后的某个位置。如果我要对其进行编码，我会这样做。

于 2012-12-11T23:09:48.093 回答
0

好吧，就在这里。http://artiris.clients.twi.tl/galeries/galerie-bleue

不确定这是否是最好的方法，但它似乎有效！

当滑块开始移动时，我开始一个超时，它每 100 毫秒运行一个函数。当滑块停止移动时，超时清除。

这是我的功能：

function adjustFilter() {
    var nodes = $gallerySlider.data('iosslider').slideNodes,
        stage = $gallerySlider.data('iosslider').stageWidth,
        matrix =    $slider.css("-webkit-transform") ||
                    $slider.css("-moz-transform") ||
                    $slider.css("-ms-transform") ||
                    $slider.css("-o-transform") ||
                    $slider.css("transform"),
        matrixArray = matrixToArray(matrix),
        position =  Math.abs(matrixArray[4]);

    for(var i = 0; i < nodes.length; i++) {
        var $node = $(nodes[i]),
            nodeMatrix =    $node.css("-webkit-transform") ||
                            $node.css("-moz-transform") ||
                            $node.css("-ms-transform") ||
                            $node.css("-o-transform") ||
                            $node.css("transform"),
            nodeMatrixArray = matrixToArray(nodeMatrix),
            nodePosition = Math.abs(nodeMatrixArray[4]),
            distance = Math.abs(Math.min(Math.max(parseInt(nodePosition-position), stage*(-1)), stage)),
            tx = distance/stage;

        $node.css({ '-webkit-filter' : 'blur('+tx*10/2+'px) grayscale('+tx+')' })
    }
}

基本上它得到滑块的位置。然后对于每个节点，我得到它的当前位置并计算到中心的距离。这个距离是标准化的，因此它永远不会大于幻灯片的宽度。然后我使用该数字实时设置每个节点的模糊和灰度。这样效果是连续的。

到目前为止，性能似乎还不错。无论如何，我只会在浏览器支持过滤器属性时运行该函数。

如果有人可以建议我改进此代码的方法，我会全力以赴。

于 2012-12-12T07:45:42.187 回答