Question

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

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

这是棘手的部分。我希望模糊过渡进出。没有时间值，而是希望将过渡链接到滑块移动。例如，当艺术作品接近中心时，模糊值将连接到移动，并且当艺术作品位于中心时将为0。我想要这个，因为滑块支持触摸。

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

总而言之，我只需要有人引导我朝着正确的方向指导我如何干净有效地做到这一点。

由于

Answer 1

除非你不断有某种“onDrag”事件发生，否则只有两种方法可以解决这个问题。

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

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

第二：仅限CSS的解决方案。如果运动只是CSS，那么运气好的话，模糊可以用同样的方式完成。可悲的是，我不是CSS专家，所以我不确定这样做的最好方法。

对不起，这对你的问题不是一个很好的答案，但我想为你解释一下javascript选项，以及为什么你不应该这样做的原因。

Answer 2

iosSlider dev报告了一些见解。

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

Answer 3

这就是它。 http://artiris.clients.twi.tl/galeries/galerie-bleue

不确定这是否是最佳方式，但它似乎有效！

当滑块开始移动时，我会启动一个每100ms运行一次功能的超时。滑块停止移动时超时清除。

这是我的功能：

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+')' })
    }
}

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

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

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

在收听值变化时执行功能

3 个答案: