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或者修改人家的代码,我觉得也挺好的,为什么?!因为我想这样,你能怎么办,打我?少废话,直接上代 ...
随机推荐
- Vue+DataTables warning:table id=xxxx -Cannot reinitialize DataTable.报错解决方法
问题描述: 使用DataTables来写列表,用vue来渲染数据,有搜索功能,每次点击搜索就会报错,如下图所示. 问题排查: 找了一系列原因,最后发现是我每次请求完数据之后都会添加分页功能,从而导致了 ...
- (十)操作数据库、xlrd、xlwt补充
一.补充操作数据库: 1.建立游标时,指定返回的类型是字典 cur = coon.cursor(cursor=pymysql.cursors.DictCursor) 2.cur.fetchall() ...
- servlet的继承关系
一.servlet的继承关系 1.servlet程序是sun公司开发用于web资源技术,任何一个类只需要实现了servlet接口,那么就可以成为servlet程序 2.继承体系: ---------- ...
- svn仓库迁移
注意事项 1.仅迁移代码.日志.版本信息,(用户.权限.配置即conf目录需要手动移动或重新配置) 2.新仓库需无代码,即新建仓库后不要进行上传操作,否则迁移可能造成冲突,导致迁移失败 操作步骤 1. ...
- superset在 centos 7安装运行
参考:1.http://blog.csdn.net/u014729236/article/details/76302888?locationNum=2&fps=1 2.https://www. ...
- PHP 构造方法 __construct()和PHP 析构方法 __destruct()
PHP 构造方法 __construct() 允许在实例化一个类之前先执行构造方法. 构造方法 构造方法是类中的一个特殊方法.当使用 new 操作符创建一个类的实例时,构造方法将会自动调用,其名称必须 ...
- Saving custom fields in production order
In additional data screen 1.PPCO0012->EXIT_SAPLCOKO1_001->ZXCO1U11 ci_aufk-zxxx = i_caufvd ...
- laravel -查询近7月走势图案例
// 获取7月前的时间$time = date('Y-m',strtotime("-0 year -7 month -0 day" ));$where['created_at'] ...
- swift 自动布局设置 tableview 的 tableHeaderView 的高度
class headerView: UIView { var whiteView = UIView().then { $.backgroundColor = UIColor.red } overrid ...
- thinkphp 响应对象
<?php namespace app\admin\controller; use think\Request; class Index{ public function index(Reque ...