利用浏览器全屏api实现js全屏

这篇文章主要介绍了利用浏览器全屏api实现js全屏的代码示例,示例中使用了jquery,把这个库的地址改成自己的,大家参考使用吧

代码如下:

(function () {

var fullScreenApi = {

supportsFullScreen : false,

isFullScreen : function () {

return false;

},

requestFullScreen : function () {},

cancelFullScreen : function () {},

fullScreenEventName : '',

prefix : ''

},

browserPrefixes = 'webkit moz o ms khtml'.split(' ');

// check for native support

if (typeof document.cancelFullScreen != 'undefined') {

fullScreenApi.supportsFullScreen = true;

} else {

// check for fullscreen support by vendor prefix

for (var i = 0, il = browserPrefixes.length; i < il; i++) {

fullScreenApi.prefix = browserPrefixes[i];

if (typeof document[fullScreenApi.prefix + 'CancelFullScreen'] != 'undefined') {

fullScreenApi.supportsFullScreen = true;

break;

}

}

}

// update methods to do something useful

if (fullScreenApi.supportsFullScreen) {

fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';

fullScreenApi.isFullScreen = function () {

switch (this.prefix) {

case '':

return document.fullScreen;

case 'webkit':

return document.webkitIsFullScreen;

default:

return document[this.prefix + 'FullScreen'];

}

}

fullScreenApi.requestFullScreen = function (el) {

return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();

}

fullScreenApi.cancelFullScreen = function (el) {

return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();

}

}

// jQuery plugin

if (typeof jQuery != 'undefined') {

jQuery.fn.requestFullScreen = function () {

return this.each(function () {

if (fullScreenApi.supportsFullScreen) {

fullScreenApi.requestFullScreen(this);

}

});

};

}

// export api

window.fullScreenApi = fullScreenApi;

})();

$(function(){

$("#fullScreenBtn").click(function(){

$("#fullScreen").requestFullScreen();

});

if(window.top != self){

$("#tip").text("iframe里面不能演示该功能!请点击右下角的全屏查看!").show();

}

});

if (!fullScreenApi.supportsFullScreen) {

alert("您的破浏览器不支持全屏API哦,请换高版本的chrome或者firebox!");

}

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>javascript启用全屏</title>

<script id="jquery_183" type="text/javascript" class="library" src=jquery-1.8.3.min.js"></script>

</head>

<body>

<button id="fullScreenBtn">点击我进入全屏模式</button>

<div id="fullScreen" class="fullScreen">

<h1>

我是全屏区域的内容!

</h1>

<div id="tip" style="display:none;">

</div>

</div>

</body>

</html>

代码如下:

body{

background:#fff;

}

button{

border:1px solid #ccc;

cursor:pointer;

display:block;

margin:auto;

position:relative;

top:100px;

}

.fullScreen{

padding-top:10%;

text-align:center;

background: none repeat scroll 0 0 #FFFFFF;

}

/* Mozilla proposal (dash) */

.fullScreen:full-screen {

width:100%;

height:100%;

}

/* W3C proposal (no dash) */

.fullScreen:fullscreen {

width:100%;

height:100%;

}

/* currently working vendor prefixes */

.fullScreen:-webkit-full-screen, .fullScreen:-moz-full-screen {

width:100%;

height:100%;

}

:-webkit-full-screen{

width:100%;

height:100%;

}

分类:Javascript教程 时间:2012-10-18 人气:1
本文关键词:
分享到:

相关文章

  • C#中用API实现MP3等音频文件的播放类 2012-02-07

    C#没有提供播放MP3等音频文件的类,要编写播放MP3等音频文件程序,必须使用第三方控件或类。本文使用API函数mciSendString,编写一个播放MP3等音频文件的类。   具体源码如下:   一、使用API函数mciSendString构成的媒体播放类。 using System; using System.Runtime.InteropServices; using System.Text; using System.IO ; namespace clsMCIPlay {  ///

  • 用VC++6.0的Sockets API实现一个聊天室程序 2012-02-15

    1.VC++网络编程及Windows Sockets API简介   VC++对网络编程的支持有socket支持,WinInet支持,MAPI和ISAPI支持等。其中,Windows Sockets API是TCP/IP网络环境里,也是Internet上进行开发最为通用的API。最早美国加州大学Berkeley分校在UNIX下为TCP/IP协议开发了一个API,这个API就是著名的Berkeley Socket接口(套接字)。在桌面操作系统进入Windows时代后,仍然继承了Socket方法。在

  • 基于Visual C++的Winsock API研究 2012-02-25

    为了方便网络编程,90年代初,由Microsoft联合了其他几家公司共同制定了一套WINDOWS下的网络编程接口,即Windows Sockets规范,它不是一种网络协议,而是一套开放的、支持多种协议的Windows下的网络编程接口。现在的Winsock已经基本上实现了与协议无关,你可以使用Winsock来调用多种协议的功能,但较常使用的是TCP/IP协议。Socket实际在计算机中提供了一个通信端口,可以通过这个端口与任何一个具有Socket接口的计算机通信。应用程序在网络上传输,接收的信息都

  • 淘宝客做API采集站好还是单页站好? 2012-02-26

      要问目前做网赚最好的项目是什么?估计大家都会说:淘宝客!是啊,我也无意间进入了淘宝客,做了将近一年,发现淘宝客确实非常不错,它至少比传统的广告联盟要强百倍,即使谷歌联盟也没法跟淘宝客比,当然了,每个行业都有精英,有做谷歌联盟做的好的,但总体来说,目前所有的网上赚钱项目中淘宝客还是最给力的。现在据说做淘宝客有百万大军了吧,日赚千元不在少数,日赚百元更是不胜枚举啊,像我现在也就日赚百元吧,当然也不是每天都能日赚百元,但一个月下来至少1500-2000元吧,因为我不是全职做淘客,所以现在感觉很知足

  • VBS调用API 对话框 2012-05-09

    需要用到 DynaWrapper 组件,使用前先 regsvr32 dynwrap.dll 。附件里的vbs可以直接运行,我已经加了一句,呵呵 Option Explicit '************************************ '* Sample GUI only with API calls * '* Need DynaWrap component * '* Use Struct v1.1 Class * '* syntax Win NT et > * '* om

  • JAVA学习第四十五课 - 其他对象API(一) 2012-05-23

    一、System类 1. static long currentTimeMillis() 返回以毫秒为单位的当前时间。 实际上:当前时间与协调世界时 1970 年 1 月 1 日午夜之间的时间差(以毫秒为单位测量)。 long time = 1414069291407l;//long型 后面加l System.out.println(time); 2. static void exit(int status)终止当前正在运行的 Java 虚拟机。 static void gc()运行垃圾回收器

  • javascript使用百度地图api和html5特性获取浏览器位置 2012-06-02

    本文介绍了javascript使用百度地图api和html5特性获取浏览器位置的小功能,大家参考使用吧 代码如下: <!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮,获得您的位置:</p> <button onclick="getLocation()">试一下</button> <script src="http://api.map.baidu.com/ap

  • BurpSuite 扩展开发[1]-API与HelloWold 2012-06-11

    0x00 简介 BurpSuite神器这些年非常的受大家欢迎,在国庆期间解了下Burp相关开发并写了这篇笔记。希望和大家分享一下JavaSwing和Burp插件相关开发。第一节仅简单的了解下API相关,后面会带着大家利用Netbeans开发我们自己的扩展以及各种有趣的小工具。 0x01 怎么学? 第一个问题是我们应该怎么去写自己的Burp扩展?我们可以找一些现有的扩展学习下,或者参阅官方文档或者手册,其次才是google一下是否有相关的教程、文章进行学习。 google搜索:burp suite

  • Java手机软件图形界面API之慨述 2012-06-17

    一、序言 手持设备的用户接口编程不同于桌面微机编程。例如,手持设备的显示尺寸要小,显示设备并不总是包括点击工具如鼠标和笔。由于这些原因,在手持设备的GUI编程时,我们不可能遵循与台式微机编程GUI同样的规则。 CLDC本身并没有定义任何的GUI功能。代之的是,J2ME的官方GUI类用象MIDP这样的轮廓文件所描述,并由JAVA社团组织定义。你可能注意到在MIDP中描述的GUI类不是基于AWT的,这似乎存在很大问题。请往下看。 二、为什么不重用AWT? 经过相当的考虑之后,MIDP专家组决定不再重

  • Android开发者指南(10) -- Android API Levels 2012-07-28

    当你开发你的Android应用程序时,了解该平台API变更管理的基本方法和概念是很有帮助的。同样的,知道API级别标识以及该标识如何保障你的应用与实际硬件设备相兼容对于开发及后续的发布、维护都是有益的。 本节内容告诉你API级别的知识,以及它如何影响你开发和使用的应用。 关于如何使用“以API级别进行过滤”来使用API参考手册,从本文末尾的html#filtering">文档过滤(Filtering the documentation)中可以得到更多信息。 API级别是什么?(What i

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.053 (s). 10 q(s)