Question

我使用Modernizr 2.7.1检测用户是否正在使用触摸设备，以便在全屏视频背景与BigVideo.js或移动设备的静态图片之间切换：

$(function() {
        var BV = new $.BigVideo({useFlashForFirefox:false});
        BV.init();
if (Modernizr.touch) {
            BV.show('/img/background-dock.jpg');
        } else {
            BV.show('/vid/test.mp4', {altSource:'/vid/test.ogv', ambient:true});
        }
});

不幸的是，静态图像没有响应，并且无法很好地扩展，尤其是在较小的屏幕上。

因此，我希望使用vegas.js使用另一个脚本显示图像，该脚本本身可以完美运行：

$(function() {
        $.vegas({
            src:'/img/background-dock.jpg'
        });
        $.vegas('overlay', {
            src:'/img/overlays/01.png'
        });
    });

如果我将此代码放在BV.show('/img/background-dock.jpg');循环中，则代码不会执行，即没有任何反应：

 <script>

$(function() {
        var BV = new $.BigVideo({useFlashForFirefox:false});
        BV.init();
if (Modernizr.touchevents) {
            BV.show($(function() {$.vegas({src:'/img/background-dock.jpg'}); }););
        } else {
            BV.show('/vid/test.mp4', {altSource:'/vid/test.ogv', ambient:true});
        }
});
</script>

不幸的是，我的Javascript知识仍然有限。

如何在循环中正确放置代码？

Answer 1

（从我在github问题上的答案交叉发布......）

Modernizr.touch已重命名为Modernizr.touchevents，因为它确实是什么 - 检测touchevents。正如您在#448中看到的那样，

有时你有一个触摸设备..有时你有webkit触摸事件。有时你有MS指针事件..

因此，在这种情况下，您还希望进行(Modernizr.touchevents || Modernizr.pointerevents)。

不幸的是，pointerevents detect不在2. *分支中，因为它是在3.0左右建立的，未发布。您需要从当前主分支构建您的modernizr构建（说明包含在自述文件中），或者手动将pointerevents detect添加到您的modernizr构建中。

话虽如此，触摸屏对移动设备来说是一个糟糕的指标。许多新的Windows 8平板电脑都支持触摸，并且可以获得静态背景。

你真正在做的是检查是否支持自动播放。 We have a detect for that，但您需要重新移植它。

欢呼声

现在已经涵盖了你的问题......

BV.show不接受函数作为参数。

如果您只是在这一个地方使用它，那么真的不需要让访问者下载一个完全独立的库（拉斯维加斯）来缩放图片。您可以通过查看为该元素生成的css并将其添加到页面来重新创建它们正在执行的操作。然后，您可以在HTML元素上切换类（就像Modernizr添加它的类一样），而不是您现在正在做的BV.show(vegasstuff)，以选择性地隐藏或显示它。

类似......

<script>
  if (Modernizr.touch) {
    $('html').addClass('showOverlay');
  }
  else {
    // do the video
  }
</script>
<style>
  .overlay {
    display: none;
    margin: 0;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .showOverlay .overlay {
    display: block;
    background-image: url(/img/background-dock.jpg);
  }
</style>

如何在modernizr.touch循环中正确调用jquery函数？

1 个答案: