快捷導(dǎo)航

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

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

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

老是不通過(guò)，沒(méi)辦法，只能是重新發(fā)布了，反正我就是杠上了，大大小小寫(xiě)過(guò)很多前端特效，當(dāng)然也經(jīng)常在網(wǎng)上copy或者修改人家的代碼，我覺(jué)得也挺好的，為什么？！因?yàn)槲蚁脒@樣，你能怎么辦，打我？

少?gòu)U話，直接上代碼，

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代碼

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

舉個(gè)小小例子，隨便來(lái)一個(gè)按鈕試試，按鈕上在來(lái)個(gè)點(diǎn)擊事件切換。

<html id="Content">
  <body>
    <ul>
      <li>
        <a id="BtnFullOpen" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" title="按“F11”進(jìn)入全屏模式">
          <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)用代碼，說(shuō)三遍...

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");
};

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: