0

我的网页中有全屏模式。单击按钮时图像会全屏显示。我需要通过单击删除按钮或按退出按钮退出全屏。我应该使用哪个功能来实现这一点？

jQuery

$('.fullscreen').bind('click', function(event) {
   var sectionId = $(this).parents('ul').attr('id');
   var outputId  sectionId.replace('ul','img');
   var fullObj = $('#singleTemp').clone();
   var imgTarget = $('#' + outputId).attr('src');

   fullObj.find('#full').attr('src', imgTarget);

   $('#fullscreenTemp').html(fullObj.html());

   var target = document.getElementById('fullscreenTemp');
   $('#fullscreenTemp').show();

   screenfull.request(target);

我使用了一个 jQuery 全屏插件（screenfull）。这是全屏按钮的全屏类。

HTML

  <div id="singleTemp" style="display:none">
     <div id="fullDiv" style="text-align: center">
     <div class="fs-main"> 
     <div class="fs-pic"> <img id="full" style="max-height:100%; max-width:100%;" 
         alt="imagecontainer image" src=""/></div>
      <div class="fs-leftarrow"><img  id="1" src="jqe13/image/leftarrow.PNG"/></div>
      <div class="fs-rightarrow"><img src="jqe13/image/rightarrow.PNG"/></div>
      <div class="fs-remove"><img src="jqe13/image/removee.png" height="20" 
    onclick=""/></div>
      <div class="fs-like"> <img src="jqe13/image/like.PNG" height="45"/></div>
      <div class="fs-unlike"><img src="jqe13/image/unlike.PNG" height="45"/></div>
     </div>
     </div>
     </div>

全屏：

     <ul>
     <li id="outfullscreen"><a href="#"><img src="jqe13/image/fullscreen_c.PNG" 
        alt="Full Screen" class="fullscreen" title="Full Screen"></a></li></ul>

我的代码工作正常，没有错误。现在我想通过单击关闭全屏模式。

4

1 回答 1

0

你还没有提到你正在使用什么 jQuery 插件。我假设您screenfull.js通过查看您的代码片段来使用。

您应该可以通过调用退出全屏screenfull.exit();

就像是....

<button id="exit">Exit</button>
$('#exit').click(function() {
    screenfull.exit();
});

希望这可以帮助。

于 2013-07-05T05:05:55.287 回答