使用单一功能全屏制作多张图片
Make multiple images in full screen with a single function
我在 Stack Overflow 上的一个问题中发现了一个完整制作图像的代码screen.But该代码仅适用于一张图像。
<!doctype html>
<html>
<head>
<style>
.fullscreen:-webkit-full-screen {
width: auto !important;
height: auto !important;
margin:auto !important;
}
.fullscreen:-moz-full-screen {
width: auto !important;
height: auto !important;
margin:auto !important;
}
.fullscreen:-ms-fullscreen {
width: auto !important;
height: auto !important;
margin:auto !important;
}
</style>
<script>
function makeFullScreen() {
var divObj = document.getElementById("theImage");
//Use the specification method before using prefixed versions
if (divObj.requestFullscreen) {
divObj.requestFullscreen();
}
else if (divObj.msRequestFullscreen) {
divObj.msRequestFullscreen();
}
else if (divObj.mozRequestFullScreen) {
divObj.mozRequestFullScreen();
}
else if (divObj.webkitRequestFullscreen) {
divObj.webkitRequestFullscreen();
} else {
console.log("Fullscreen API is not supported");
}
}
</script>
</head>
<body>
Hello Image...</br>
<img id="theImage" style="width:400px; height:auto;" class="fullscreen" src="pic1.jpg" onClick="makeFullScreen()"></img>
</body>
</html>
能否将此函数转换为适用于多幅图像(而不是为每幅图像创建一个函数)。
这只需将 onClick 处理程序添加到多个图像元素并将 事件 参数分配给每个函数调用即可。
<img src="picA.jpg" onClick="makeFullScreen(event)">
<img src="picB.jpg" onClick="makeFullScreen(event)">
<img src="picC.jpg" onClick="makeFullScreen(event)">
在 makefullScreen 回调函数中,您可以获得触发点击事件的元素 - 因此是您的图像 - 并使用现有代码将其全屏显示。
function makeFullScreen(e) {
var divObj = e.currentTarget;
//Use the specification method before using prefixed versions
if (divObj.requestFullscreen) {
divObj.requestFullscreen();
} else if (divObj.msRequestFullscreen) {
divObj.msRequestFullscreen();
} else if (divObj.mozRequestFullScreen) {
divObj.mozRequestFullScreen();
} else if (divObj.webkitRequestFullscreen) {
divObj.webkitRequestFullscreen();
} else {
console.log("Fullscreen API is not supported");
}
}
我在 Stack Overflow 上的一个问题中发现了一个完整制作图像的代码screen.But该代码仅适用于一张图像。
<!doctype html>
<html>
<head>
<style>
.fullscreen:-webkit-full-screen {
width: auto !important;
height: auto !important;
margin:auto !important;
}
.fullscreen:-moz-full-screen {
width: auto !important;
height: auto !important;
margin:auto !important;
}
.fullscreen:-ms-fullscreen {
width: auto !important;
height: auto !important;
margin:auto !important;
}
</style>
<script>
function makeFullScreen() {
var divObj = document.getElementById("theImage");
//Use the specification method before using prefixed versions
if (divObj.requestFullscreen) {
divObj.requestFullscreen();
}
else if (divObj.msRequestFullscreen) {
divObj.msRequestFullscreen();
}
else if (divObj.mozRequestFullScreen) {
divObj.mozRequestFullScreen();
}
else if (divObj.webkitRequestFullscreen) {
divObj.webkitRequestFullscreen();
} else {
console.log("Fullscreen API is not supported");
}
}
</script>
</head>
<body>
Hello Image...</br>
<img id="theImage" style="width:400px; height:auto;" class="fullscreen" src="pic1.jpg" onClick="makeFullScreen()"></img>
</body>
</html>
能否将此函数转换为适用于多幅图像(而不是为每幅图像创建一个函数)。
这只需将 onClick 处理程序添加到多个图像元素并将 事件 参数分配给每个函数调用即可。
<img src="picA.jpg" onClick="makeFullScreen(event)">
<img src="picB.jpg" onClick="makeFullScreen(event)">
<img src="picC.jpg" onClick="makeFullScreen(event)">
在 makefullScreen 回调函数中,您可以获得触发点击事件的元素 - 因此是您的图像 - 并使用现有代码将其全屏显示。
function makeFullScreen(e) {
var divObj = e.currentTarget;
//Use the specification method before using prefixed versions
if (divObj.requestFullscreen) {
divObj.requestFullscreen();
} else if (divObj.msRequestFullscreen) {
divObj.msRequestFullscreen();
} else if (divObj.mozRequestFullScreen) {
divObj.mozRequestFullScreen();
} else if (divObj.webkitRequestFullscreen) {
divObj.webkitRequestFullscreen();
} else {
console.log("Fullscreen API is not supported");
}
}