javascript - 如何在 AnySlider 中应用滑动

Question

我正在使用官方文档中提到的滑动支持，但它不适用于嵌入式 youtube 视频。

Answer 1

问题是 YouTube 视频实际上是带有 HTML5 和嵌入视频的 iframe。因此，在视频上滑动不会注册 iframe 之外的内容。最简单的解决方案是在视频上放置一个叠加层，让它只覆盖视频。这样做的问题是您无法点击视频本身使其播放，您必须使用控件。

在这个更新的演示中，覆盖覆盖了视频并使控件可见（添加background: #f00;到滑动覆盖 css 以查看它）。控件的高度为 40 像素，因此您会看到叠加层的高度考虑了这一点。

这是 css（此演示的滑块大小为 300 x 200）：

.swipe-overlay {
    position: absolute;
    width: 300px;
    height: 160px;
    top: 0;
    left: 0;
}

这是更新的初始化代码：

$('#slider').anythingSlider({

    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {

        var time = 1000, // allow movement if < 1000 ms (1 sec)
            range = 50,  // swipe movement of 50 pixels triggers the slider
            x = 0, t = 0, touch = "ontouchend" in document,
            st = (touch) ? 'touchstart' : 'mousedown',
            mv = (touch) ? 'touchmove' : 'mousemove',
            en = (touch) ? 'touchend' : 'mouseup';

        $('<div class="swipe-overlay"></div>')
            .appendTo(slider.$window)
            .bind(st, function(e){
                // prevent image drag (Firefox)
                e.preventDefault();
                t = (new Date()).getTime();
                x = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
            })
            .bind(en, function(e){
                t = 0; x = 0;
            })
            .bind(mv, function(e){
                e.preventDefault();
                var newx = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
                r = (x === 0) ? 0 : Math.abs(newx - x),
                // allow if movement < 1 sec
                ct = (new Date()).getTime();
                if (t !== 0 && ct - t < time && r > range) {
                    if (newx < x) { slider.goForward(); }
                    if (newx > x) { slider.goBack(); }
                    t = 0; x = 0;
                }
            });
    }

});