Question

想要将HTML 5全屏APi应用于div的背景图像

<div class="bgimg" style="background-image:url('img/home-1.jpg')" />
   <img src="img/fullscreen.png" id="fullscreen-btn">
</div>

我想点击fullscreen-btn div bgimg的背景图片，即home-1.jpg应全屏打开。我尝试了下面的代码，但没有在Kindlt建议中工作

<scritpt>
$(function() {
    var bg = $('.bgimg');
    $('#fullscreen-btn').click(function () {   
      goFullScreen(bg.attr('style', 'background-image:url()')); 
    });
});

function goFullScreen( element )
{
    if ( element === undefined )
    {
        // If no element defined, use entire document
        element = document.documentElement;
    }

    if ( element.requestFullScreen )
    {
        // Spec, supported by Opera 12.1+
        element.requestFullScreen();
    }
    else if ( element.mozRequestFullScreen )
    {
        // Supported by Firefox 10+
        element.mozRequestFullScreen();
    }
    else if ( element.webkitRequestFullScreen )
    {
        // Supported by Chrome 15+ & Safari 5.1+
        element.webkitRequestFullScreen();
    }
    // Still no IE support, sorry folks :( 
}

Answer 1

似乎对我有用。您只需要在javascript中添加图片路径，并在其周围添加引号。

$(function() {
    var bg = $('.bgimg');
    $('#fullscreen-btn').click(function () {   
      goFullScreen(bg.attr('style', "background-image:url('img/home-1.jpg')")); 
    });
});

<强> FIDDLE

Answer 2

我相信，但不会100％肯定，全屏API只能全屏显示HTML 元素。这就是为什么它将全屏div.bgimg但不会全屏显示元素的背景图像。 <img>是一个HTML元素，但我认为这样可行。你有什么理由不想使用它而不是设置你的div的背景图片吗？

如果是这样，您可以尝试连接一些将可见div与背景图像（就像您现在拥有的那样）连接到不可见图像的JS，并将其加载到全屏脚本中。

如何将HTML5全屏API应用于div背景图像

2 个答案: