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