js實現全屏切換控制 WordPress

• 2020 年 3 月 6 日
• 筆記

前段時間做的幾個小項目都加入進去了全屏切換控制按鈕，這個過程是怎麼實現的呢，其實和暗黑控制切換一樣。非常的簡單。並且適用於所有網站，WordPress、typecho都不是問題，技術互通。只待你補充css

效果展示

正文開始

#js代碼

//控制全屏  function enterfullscreen() { //進入全屏      $("#fullscreen").html("退出全屏");      var docElm = document.documentElement;      //W3C      if(docElm.requestFullscreen) {          docElm.requestFullscreen();      }      //FireFox      else if(docElm.mozRequestFullScreen) {          docElm.mozRequestFullScreen();      }      //Chrome等      else if(docElm.webkitRequestFullScreen) {          docElm.webkitRequestFullScreen();      }      //IE11      else if(elem.msRequestFullscreen) {          elem.msRequestFullscreen();      }  }    function exitfullscreen() { //退出全屏      $("#fullscreen").html("切換全屏");      if(document.exitFullscreen) {          document.exitFullscreen();      } else if(document.mozCancelFullScreen) {          document.mozCancelFullScreen();      } else if(document.webkitCancelFullScreen) {          document.webkitCancelFullScreen();      } else if(document.msExitFullscreen) {          document.msExitFullscreen();      }  }    var a = 0;  $('#fullscreen').on('click', function() {      a++;      a % 2 == 1 ? enterfullscreen() : exitfullscreen();  })

#前端調用示例

<a type="button" id="fullscreen" class="btn btn-default visible-lg visible-md"><i class="fa fa-refresh" aria-hidden="true"></i> 切換全屏</a>

#js調用示例

<li class="fk_service_box fk_service_zmkiqp"  onclick="javascript:document.getElementById('fullscreen').click();" >  <div class="fk_service_zmkiqp_cont"> <span class="fk_service_triangle"></span>切換全屏</div>  </li>

代碼源於:

博客園:挑戰者V博客  https://www.cnblogs.com/youcong/p/11440596.html