双击图片/视频全屏（双击退出全屏）功能

心月IT博客 09-29

默认

摘要：很多时候为了页面的整体布局，图片或者视频在页面中安排的位置都不会太大，但用户在浏览的时候又想全屏查看视频图片，互联网上的很多应用的全屏功能都是通过双击来实现的，这也导致了用户在浏览网页遇到图片就会习惯性的双击放大查看。

很多时候为了页面的整体布局，图片或者视频在页面中安排的位置都不会太大，但用户在浏览的时候又想全屏查看视频/图片，互联网上的很多应用的全屏功能都是通过双击来实现的，这也导致了用户在浏览网页遇到图片就会习惯性的双击放大查看。

今天就来跟大家一起分享下如何实现双击全屏显示功能。

实现全屏功能并不麻烦，两个api就能搞定，全屏：element.requestFullscreen();退出全屏：document.exitFullscreen();

<!DOCTYPE html>
<html>

<head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
</head>
<style>
  .full {
        text-align: center;
        cursor: pointer;
    }

    .full img {
        vertical-align: middle;
    }

    .full:hover img {
        box-shadow: 2px 2px 4px rgba(0, 0, 0, .45);
    }

    .full:after {
        /* 图片垂直居中显示 */
        display: inline-block;
        content: '';
        width: 0;
        height: 100%;
        vertical-align: middle;
    }

    :-webkit-full-screen img {
        height: 60%;
    }

    :-moz-full-screen img {
        height: 60%;
    }

    :-ms-full-screen img {
        height: 60%;
    }

    :-o-full-screen img {
        height: 60%;
    }

    :full-screen img {
        height: 60%;
    }
</style>

<body>

  <div class="full">
    <div class="full" title="点击全屏浏览">
      <img class="img" src="3.jpg" />
      <img class="img" src="4.jpg" />
      <img class="img" src="5.jpg" />
    </div>
  </div>
</body>

<script type="text/javascript">
  (function () {
    var runPrefixMethod = function (element, method) {
      var usablePrefixMethod;
      ["webkit", "moz", "ms", "o", ""].forEach(function (prefix) {
        if (usablePrefixMethod) return;
        if (prefix === "") {
          // 无前缀，方法首字母小写
          method = method.slice(0, 1).toLowerCase() + method.slice(1);

        }

        var typePrefixMethod = typeof element[prefix + method];

        if (typePrefixMethod + "" !== "undefined") {
          if (typePrefixMethod === "function") {
            usablePrefixMethod = element[prefix + method]();
          } else {
            usablePrefixMethod = element[prefix + method];
          }
        }
      });

      return usablePrefixMethod;
    };

    if (typeof window.screenX === "number") {
      var eleFull = document.querySelectorAll(".img"); //选中所有的图片
      for (var i = 0; i < eleFull.length; i++){
      	eleFull[i].addEventListener("dblclick", function () { 
          if (runPrefixMethod(document, "FullScreen") || runPrefixMethod(document, "IsFullScreen")) {
            runPrefixMethod(document, "CancelFullScreen");
            this.title = this.title.replace("退出", "");
          } else if (runPrefixMethod(this, "RequestFullScreen")) {
            this.title = this.title.replace("点击", "点击退出");
          }
        });
      }
        
    } else {
      alert("爷，现在都什么时代了，你还在用这么土的浏览器~~");
    }
  })();
</script>

</html>

双击前的图片列表：

图片列表