利用html5实现全屏效果

话不多说，直接撂代码.

html （首先准备一个容器 和一个按钮）

  <div class="container">
    <span class="btn">Full Screen</span>
    <h2> Hello Word! </h2>
  </div>

js ( 只是实现代码 可自行实现封装 )

  function $(v) {
    return document.querySelectorAll(v);
  }
  var oBtn = $('.btn')[0],
      oContainer = $('.container')[0];
  var status = 0,
      btnText = [ 'Full Screen', 'Exit FullScreen' ];

  oBtn.onclick = function() {
    var tag = (++ status) % 2;

    this.innerHTML = btnText[tag];
    toggleFullScreen.call(oContainer, tag);
  };

  function toggleFullScreen(tag) {
    if(tag) {
      full(this);
      return;
    }
    exit();

    fucntion full(element) {
      var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
      requestMethod.call(element);
    }
    function exit() {
      var doc = document;

      if(doc.webkitCancelFullScreen) {
        doc.webkitCancelFullScreen();
      } else if (doc.mozCancelFullScreen) {
        this.mozCancelFullScreen();
      } else if (doc.cancelFullScreen) {
        doc.cancelFullScreen();
      } else if (doc.exitFullscreen) {
        doc.exitFullscreen();
      } else {
        //浏览器不支持全屏API或已被禁用
      };
    }
  }