唯品秀博客
首页 > 前端开发 > HTML/CSS > 双击视频/图片全屏功能(解决全屏后双击无法退出)

双击视频/图片全屏功能(解决全屏后双击无法退出)

2018年04月22日 唯品秀 2503次浏览

首先:实现全屏功能并不麻烦,两个api就能搞定,全屏:element.requestFullscreen();退出全屏:document.exitFullscreen();但实际运用中发现,全屏后是无法再双击退出全屏,本文重点就是解决这个问题,直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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 src="http://image.zhangxinxu.com/image/study/s/s512/mm1.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(".full"); //选中所有的图片
      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>

在线一览

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 3 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
3

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - 双击视频/图片全屏功能(解决全屏后双击无法退出)

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!

站点统计

  • 文章总数: 190 篇
  • 草稿数目: 2 篇
  • 分类数目: 13 个
  • 页面总数: 21 个
  • 评论总数: 873 条
  • 链接总数: 13 个
  • 标签总数: 371 个
  • 建站时间: 886 天
  • 注册用户: 690 人
  • 访问总量: 8672992 次
  • 最近更新: 2019年5月17日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线