唯品秀前端博客

首先:实现全屏功能并不麻烦,两个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>

在线一览

本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(5) 打赏
标签:

上一篇:

下一篇:

相关推荐

2 条评论关于"双击视频/图片全屏功能(解决全屏后双击无法退出)"

表情

最新评论

  1. 奶爸建网站笔记
    Windows 10 Chrome 75.0.3770.100

    为什么你的都是18年的内容?RSS

    1. 管理员
      Windows 10 Chrome 57.0.2987.98

      @奶爸建网站笔记是么,咋看的,我没注意

  2. 暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏