您的位置:首页> HTML5教程> Fullscreen

Fullscreen 全屏效果

2019-8-6 14:33| 作者: admin| 查看: 906| 评论: 0|来自: 蚂蚁部落

在HTML5之前,实现图片、视频或者其他元素的全屏效果比较困难。

使用HTML5 新增的全屏 API,可以将用户的注意力导向特定元素,同时隐藏背景或转移对其他应用的注意力。

当前W3C全屏规范并达到最终版本,所以大多数浏览器供应商都使用唯一标识符为 API 添加前缀。

Fullscreen API:

(1).requestFullscreen方法参阅requestFullscreen()方法一章节。

(2).exitFullscreen方法参阅exitFullscreen()方法一章节。

(3).allowfullscreen属性参阅allowfullscreen属性一章节。

(4).fullscreenError事件参阅fullscreenError事件一章节。

(5).fullscreenchange事件参阅fullscreenchange事件一章节。

(6).:fullscreen参阅:fullscreen伪类选择器一章节。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
 
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
.fullScreen {
  width: 600px; 
  height: 350px; 
  text-align:center;
  line-height:350px;
}
#top {
  background-color: red;
}
#bottom {
  background-color: green;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var inFullScreen = false;
 
  var fsClass = document.getElementsByClassName("fullScreen");
  for (var i = 0; i < fsClass.length; i++) {
    fsClass[i].addEventListener("click", function (evt) {
      if (inFullScreen == false) {
        makeFullScreen(evt.target);
      } else {
        reset();
      }
    }, false);
  }
  function makeFullScreen(divObj) {
    if (divObj.requestFullscreen) {
      divObj.requestFullscreen();
    }
    else if (divObj.msRequestFullscreen) {
      divObj.msRequestFullscreen();
    }
    else if (divObj.mozRequestFullScreen) {
      divObj.mozRequestFullScreen();
    }
    else if (divObj.webkitRequestFullscreen) {
      divObj.webkitRequestFullscreen();
    }
    inFullScreen = true;
    return;
  }
 
  function reset() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
    else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
    inFullScreen = false;
    return;
  }
}
</script>
</head>
<body>
<div id="top" class="fullScreen">蚂蚁部落一</div>
<div id="bottom" class="fullScreen">蚂蚁部落二</div>
</body>
</html>

上面的代码演示了全屏效果,具体细节可以查看对应的API。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部