js实现全屏和缩放
/**
* @description 简单的浏览器检查结果。 * `webkit`
* webkit版本号,如果浏览器为非webkit内核,此属性为`undefined`。 * `chrome`
* chrome浏览器版本号,如果浏览器为chrome,此属性为`undefined`。 * `ie`
* ie浏览器版本号,如果浏览器为非ie,此属性为`undefined`。 * `firefox`
* firefox浏览器版本号,如果浏览器为非firefox,此属性为`undefined`。 * `safari`
* safari浏览器版本号,如果浏览器为非safari,此属性为`undefined`。 * `opera`
* opera浏览器版本号,如果浏览器为非opera,此属性为`undefined`。
*
* @property {Object} [browser]
*/
var browser = function() {
var ua = navigator.userAgent;
var ret = {}, webkit = ua.match(/WebKit\/([\d.]+)/), chrome = ua
.match(/Chrome\/([\d.]+)/)
|| ua.match(/CriOS\/([\d.]+)/), ie = ua.match(/MSIE\s([\d\.]+)/) || ua.match(/Edge\/([\d.]+)/)
|| ua.match(/(?:trident)(?:.*rv:([\w.]+))?/i), firefox = ua
.match(/Firefox\/([\d.]+)/), safari = ua.match(/Safari\/([\d.]+)/), opera = ua
.match(/OPR\/([\d.]+)/); webkit && (ret.webkit = parseFloat(webkit[1]));
chrome && (ret.chrome = parseFloat(chrome[1]));
ie && (ret.ie = parseFloat(ie[1]));
firefox && (ret.firefox = parseFloat(firefox[1]));
safari && (ret.safari = parseFloat(safari[1]));
opera && (ret.opera = parseFloat(opera[1])); return ret;
};
function requestFullscreen() {
var docElm = document.documentElement;
if (browser().ie) {
docElm.msRequestFullscreen();
return false;
} if (browser().chrome) {
docElm.webkitRequestFullScreen();
return false;
}
if (browser().firefox) {
docElm.mozRequestFullScreen();
return false;
}
}
function exitFullscreen() {
if (browser().ie) {
document.msExitFullscreen();
return false;
} if (browser().chrome) {
document.webkitCancelFullScreen();
return false;
}
if (browser().firefox) {
document.mozCancelFullScreen();
return false;
}
}
js实现全屏和缩放的更多相关文章
- fullpage.js jq全屏滚动插件
fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下 ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- js控制全屏及退出全屏
js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...
- WPF无边框拖动、全屏、缩放
原文:WPF无边框拖动.全屏.缩放 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/lwwl12/article/details/78059361 先看效果 ...
- 自己用js实现全屏滚动
参照fullPage.js的效果,用自己的想法实现的. 实现的效果:1.全屏滚动,滚动一下齿轮就会滚动全屏. 2.自适应缩放,无论怎么改变窗口的大小,都会保证用一个元素占满全屏. 下一步计划: 1.改 ...
- AnimatedModal.js – CSS3 全屏模态窗口
AnimatedModal.js 是一个用来创建一个全屏模态窗口的 jQuery 插件,基于 CSS3 过渡实现.您可以利用 Animate.css 中的转换或自行创建自己的过渡效果.支持 Firef ...
- 兼容IE浏览器的js浏览器全屏代码
众所周知,IE是个奇葩的浏览器,但是由于用户量很大,开发者还是不得不为IE考虑一下,于是,各种浏览器相关的操作,都要多一个特别的判断——专门针对IE浏览器的判断,这里的全屏也不例外.看代码: func ...
- js实现全屏
详细内容请点击 1.window.open方式 第一种: 在已经打开的一个普通网页上,点击“全屏显示”,然后进入该网页对应的全屏模式.方法为:在网页的<body>与</body> ...
- JS 实现全屏预览 F11功能
老是不通过,没办法,只能是重新发布了,反正我就是杠上了,大大小小写过很多前端特效,当然也经常在网上copy或者修改人家的代码,我觉得也挺好的,为什么?!因为我想这样,你能怎么办,打我?少废话,直接上代 ...
随机推荐
- java调用webservice方法
由于项目的历史原因,webservice服务端是乙方公司开发的,我们自己开发的系统需要去调用乙方公司的webservice接口.前面用了网上提供的一种方法(非生成代理类),怎么也调用不成功(也许是因为 ...
- 浅谈Tomcat和Servlet
本文浅谈下对Tomcat和Servlet总体的理解,初学时有用过一段时间,但当时疲于应对如何xml配置和使用,对他们的理解就像是一个黑匣子.现在回顾一下帮助自己加深网络的理解.开始还是先推荐我看的文章 ...
- IO分类
按流向分类: 输入流 读取数据 FileReader Reader 输出流 写入数据 FileWriter Writer 按数据类型分类: 字节流 字节输入流 读取数据 InputStream 字节输 ...
- mysql内容总体回顾
数据类型: 数值类型: 整形 浮点型 字符串: char(定长)\varchar(不定长) char(定长):插入数据或查询数据都快,因为char在磁盘上插入数据时的存储空间是固定的,简单粗暴,直接就 ...
- Servlet第三篇(response;request)
response对象 Tomcat收到客户端的http请求,会针对每一次请求,分别创建一个代表请求的request对象.和代表响应的response对象 那么我们获取浏览器提交过来的数据,找reque ...
- mysql学习笔记--遇到的坑
一.navcat 连接不支持密码输入 1. 先通过命令行进去mysql的root账户 mysql -uroot -p'password' 2. 更改加密方式 alter user 'root'@'lo ...
- 第三周博客总结 <西北师范大学| 周安伟>
一,本周助教小结 工作稳步推进,时间分配合理,点评效率有所提高,主要进行了评分工作,工作情况都汇总到了Excel中. 二,助教本人博客 https://home.cnblogs.com/u ...
- LoadRunner 11.00安装篇(Win 10)
参考博文: https://blog.csdn.net/xianjie0318/article/details/78625980 https://www.cnblogs.com/VseYoung/p/ ...
- 思科模拟器GNS3-2.1.8安装笔记 (适用于版本2.0.3以上的GNS3)
当前现阶段学习经常使用的路由交换设备主要来自于思科.华为和华三三家,这三家的设备操作配置大致类似,却又不尽相同.因为实体设备通常都非常昂贵,所以作为学习,我们通常会使用它们提供的模拟器.华为的模拟器是 ...
- XA-分布式事物
1.什么是分布式事务 分布式事务就是指事务的参与者.支持事务的服务器.资源服务器以及事务管理器分别位于不同的分布式系统的不同节点之上.以上是百度百科的解释,简单的说,就是一次大的操作由不同的小操作组成 ...