Now in HTML5, there is new "Full Screen API".
Example: http://jiansenlu.blogspot.ca/2012/07/full-screen-demo-html5.html
click the image to see full image mode. Press Esc key to return to normal mode.
Source code:
<style>
section
{
display: block;
float: right;
width: 40%;
padding: 10px;
margin: 0;
border: 2px solid #ddd;
cursor: pointer;
}
section img
{
width: 100%;
}
section p
{
font-weight: bold;
text-align: center;
margin: 0;
}
section:-webkit-full-screen
{
float: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0 none;
background-color: #f00;
}
section:-moz-full-screen
{
float: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0 none;
}
section:-ms-full-screen
{
float: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0 none;
}
section:-o-full-screen
{
float: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0 none;
}
section:full-screen
{
float: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0 none;
}
</style>
<section id="fullscreen">
<img src="http://www.orble.com/images/my-fish.jpg" alt="fish" />
<p>Click image or here to see FULL screen;</p>
</section>
<script>
var e = document.getElementById("fullscreen");
e.onclick = function() {
if (RunPrefixMethod(document, "FullScreen") || RunPrefixMethod(document, "IsFullScreen")) {
RunPrefixMethod(document, "CancelFullScreen");
}
else {
RunPrefixMethod(e, "RequestFullScreen");
}
}
var pfx = ["webkit", "moz", "ms", "o", ""];
function RunPrefixMethod(obj, method) {
var p = 0, m, t;
while (p < pfx.length && !obj[m]) {
m = method;
if (pfx[p] == "") {
m = m.substr(0,1).toLowerCase() + m.substr(1);
}
m = pfx[p] + m;
t = typeof obj[m];
if (t != "undefined") {
pfx = [pfx[p]];
return (t == "function" ? obj[m]() : obj[m]);
}
p++;
}
}
</script>
section
{
display: block;
float: right;
width: 40%;
padding: 10px;
margin: 0;
border: 2px solid #ddd;
cursor: pointer;
}
section img
{
width: 100%;
}
section p
{
font-weight: bold;
text-align: center;
margin: 0;
}
section:-webkit-full-screen
{
float: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0 none;
background-color: #f00;
}
section:-moz-full-screen
{
float: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0 none;
}
section:-ms-full-screen
{
float: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0 none;
}
section:-o-full-screen
{
float: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0 none;
}
section:full-screen
{
float: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0 none;
}
</style>
<section id="fullscreen">
<img src="http://www.orble.com/images/my-fish.jpg" alt="fish" />
<p>Click image or here to see FULL screen;</p>
</section>
<script>
var e = document.getElementById("fullscreen");
e.onclick = function() {
if (RunPrefixMethod(document, "FullScreen") || RunPrefixMethod(document, "IsFullScreen")) {
RunPrefixMethod(document, "CancelFullScreen");
}
else {
RunPrefixMethod(e, "RequestFullScreen");
}
}
var pfx = ["webkit", "moz", "ms", "o", ""];
function RunPrefixMethod(obj, method) {
var p = 0, m, t;
while (p < pfx.length && !obj[m]) {
m = method;
if (pfx[p] == "") {
m = m.substr(0,1).toLowerCase() + m.substr(1);
}
m = pfx[p] + m;
t = typeof obj[m];
if (t != "undefined") {
pfx = [pfx[p]];
return (t == "function" ? obj[m]() : obj[m]);
}
p++;
}
}
</script>
Reference:
http://blogs.sitepointstatic.com/examples/tech/full-screen/index.html
No comments:
Post a Comment