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

作者：管理员 2018-04-22 12:46:13 分类：HTML/CSS 阅读（11491） 2

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

赞(6) 打赏

标签：

全屏视频

上一篇：原生javascript数据类型判断方法汇总集合

下一篇：【YQN】前后端对接接口API规范-企业开发项目流程

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

相关推荐

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

点击取消