JS實現(xiàn)全屏預覽F11功能的示例代碼

更新時間：2018年07月23日 15:40:30 作者：hover_lew

這篇文章主要介紹了JS實現(xiàn)全屏預覽F11功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

老是不通過，沒辦法，只能是重新發(fā)布了，反正我就是杠上了，大大小小寫過很多前端特效，當然也經(jīng)常在網(wǎng)上copy或者修改人家的代碼，我覺得也挺好的，為什么？！因為我想這樣，你能怎么辦，打我？

少廢話，直接上代碼，

JS代碼

function fullScreen(el) {
  var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
    wscript;
 
  if(typeof rfs != "undefined" && rfs) {
    rfs.call(el);
    return;
  }
 
  if(typeof window.ActiveXObject != "undefined") {
    wscript = new ActiveXObject("WScript.Shell");
    if(wscript) {
      wscript.SendKeys("{F11}");
    }
  }
}
 
function exitFullScreen(el) {
  var el= document,
    cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
    wscript;
 
  if (typeof cfs != "undefined" && cfs) {
   cfs.call(el);
   return;
  }
 
  if (typeof window.ActiveXObject != "undefined") {
    wscript = new ActiveXObject("WScript.Shell");
    if (wscript != null) {
      wscript.SendKeys("{F11}");
    }
 }
}

HTML代碼

最近受了一點點小刺激，對自己做的工作產(chǎn)生迷茫，不知道還要做這個做多久，還有我其實還是喜歡設計多一些，還有我喜歡設計，但是設計太難了，經(jīng)常覺得自己做的東西跟別人的，比起來差個好幾萬塊錢，Why?你問我，我問誰。好吧，我也很無賴。

舉個小小例子，隨便來一個按鈕試試，按鈕上在來個點擊事件切換。

<html id="Content">
  <body>
    <ul>
      <li>
        <a id="BtnFullOpen" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" title="按“F11”進入全屏模式">
          <i class="ace-icon fa fa-arrows-alt"></i>全屏查看
        </a>
        <a id="BtnFullQuite" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" title="按“F11”關(guān)閉全屏模式" style="display:none;">
          <i class="ace-icon fa fa-arrows-alt"></i>全屏關(guān)閉
        </a>
      </li>
      <li>2</li>
      <li>3</li>
      <li>5</li>
    </ul>
  </body>
</html>

記得一定要加上調(diào)用代碼，調(diào)用代碼，調(diào)用代碼，說三遍...

JS調(diào)用代碼

var oBtnFullOpen = document.getElementById('BtnFullOpen');
var oContent = document.getElementById('Content');
oBtnFullOpen.onclick = function() {
  fullScreen(oContent);
  oBtnFullQuite.setAttribute("style", "display:block");
  oBtnFullOpen.setAttribute("style", "display:none");
}
var oBtnFullQuite = document.getElementById('BtnFullQuite');
oBtnFullQuite.onclick = function() {
  exitFullScreen(oContent);
  oBtnFullQuite.setAttribute("style", "display:none");
  oBtnFullOpen.setAttribute("style", "display:block");
};

只做個人備忘，不做任何發(fā)表，不做信息交流。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: