HTML5全屏API ，全屏浏览图片。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>html5 -fullscreen-api</title>
<style>
*{ margin:0; padding:0}
....................................................................
.imgContainer:-webkit-full-screen {
width:100%; height:100%; background:#060; overflow:hidden; background:#000; text-align:center;
position:fixed;
left:0; top:0;
display:table-cell;
bottom:0; right:0;
}
.imgContainer:-moz-full-screen {
width:100%; height:100%; background:#060;overflow:hidden; background:#000; text-align:center;
position:fixed;
left:0; top:0;
bottom:0; right:0;
display:table-cell;
vertical-align:middle
}
.imgContainer:-webkit-full-screen img{ max-width:100%; display:inline-block; vertical-align:middle ;cursor:url("http://a.xnimg.cn/n/apps/photo/modules/photo-view/cssimg/zoomOut.cur"), auto;
}
.imgContainer:-moz-full-screen img{ max-width:100%; display:inline-block; vertical-align:middle;cursor:url("http://a.xnimg.cn/n/apps/photo/modules/photo-view/cssimg/zoomOut.cur"), auto;
}
</style>
<script type="text/javascript">
(function(){
var fullScreenApi={
supportsFullScren:false,
isFullScreen: function() { return false; },
requestFullScreen: function() {},
cancelFullScreen: function() {},
prefix:''
}
browserPrefixes = 'webkit moz o ms khtml'.split(' ');
if(typeof document.cancelFullScreen!='undefined'){
fullScreenApi.supportsFullScren=true
}
else{
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;
}
}
}
//如果浏览支持全屏
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 === '') ? el.cancelFullScreen() : el[this.prefix + 'CancelFullScreen']();
}
}
window.fullScreenApi = fullScreenApi;
})()
</script>
</head>
<body>
<h1 align="center"></h1>
<div class="imgContainer">
<a href="javascript:void(0)"><img src="http://image.dili360.com/photo/hdtj/2012/1205/62_15141524412_20121205094753.jpg"></a></div>
<div class="imgContainer">
<a href="javascript:void(0)"><img src="http://image.dili360.com/photo/hdtj/2012/1205/62_15141524424_20121205094753.jpg"></a></div>
<script type="text/javascript">
window.onload=function(){
if (window.fullScreenApi.supportsFullScreen) {
var imgContainer=document.getElementsByTagName('div');
var imgsLen=imgContainer.length;
for(var i=0; i<imgsLen;i++){
imgContainer[i].addEventListener('click',function(){
if (!fullScreenApi.isFullScreen()) {
this.style.lineHeight=window.screen.height+'px';
window.fullScreenApi.requestFullScreen(this)
}
else {
window.fullScreenApi.cancelFullScreen(document)
}
},true)
}
}
}
</script>
</body>
</html>
用chrome或者firefox直接运行即可。。。
相关推荐
video.js HTML5播放器插件API调用实例，HTML5的，Flash和其他播放技术都有不同的JavaScript API与视频交互。video.js提供了一个单一的API，可用于跨平台一致，所以你只需要编写一次代码。Video.js自定义Flash后备...
Java非对称加密源程序代码实例，本例中使用RSA加密技术，定义加密算法可用 DES,DESede,Blowfish等。 设定字符串为“张三，你好，我是李四” 产生张三的密钥对(keyPairZhang) 张三生成公钥(publicKeyZhang...
Java非对称加密源程序代码实例，本例中使用RSA加密技术，定义加密算法可用 DES,DESede,Blowfish等。 设定字符串为“张三，你好，我是李四” 产生张三的密钥对(keyPairZhang) 张三生成公钥(publicKeyZhang...
实例012 设置Eclipse中文API提示信息 18 实例013 为项目添加类库 20 实例014 使当前项目依赖另一个项目 21 1.3 界面设计器 22 实例015 安装界面设计器 22 实例016 设计Windows系统的运行对话框 界面 23 实例017 设计...
可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。 安装 直接运行安装命令： npm install puppeteer 如果出现无法安装的问题，可以使用淘宝镜像。 ...
YouTube，Vimeo，Dailymotion，VK和HTML5视频支持。 20多个硬件加速CSS3过渡。 动态模式。 全屏支持。 支持缩放。 浏览器历史记录API。 响应式图像。 HTML iframe支持。 一页上有多个实例。 可通过CSS...
Youtube Vimeo Dailymotion VK和html5视频支持。 20多个硬件加速CSS3过渡。 动态模式。 全屏支持。 支持缩放。 浏览器历史记录API。 响应式图像。 HTML iframe支持。 一页上有多个实例。 可通过CSS（SCSS...
2．本书所附光盘实例代码： 第1章（\第1章） 查看1.2.htm中noscript显示效果的方法如下： 1．将该实例复制到C:\Inetpub\wwwroot下； 2．选择浏览器的“工具”－“安全”－“本地Intranet”－“自定义级别”－“活动...
YouTube Vimeo Wistia 和 html5 视频支持。 20 多个硬件加速的 CSS3 过渡。 动态模式。 内嵌画廊全屏支持。 放大/缩小，捏合缩放。 支持滑动/向上/向下拖动以关闭图库浏览器历史记录 API（深度链接）。 响应图像。 ...
1．将该实例复制到C:\Inetpub\wwwroot下； 2．选择浏览器的“工具”－“安全”－“本地Intranet”－“自定义级别”－“活动脚本”中选用“禁用”单选框 3．在浏览器中输入下述地址：http://localhost/1.2.htm • ...
(62KB)<END><br>115,fullscreen.zip 让你轻松实现全屏显示的代码，很简单轻易更可上手，告诉你，全屏时你还可以保留工具条。(22KB)<END><br>116,sys_tray.zip 完全封装windows任务栏，使用此类可以轻松操作...