博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何使用jquery实现全屏问题
阅读量:6906 次
发布时间:2019-06-27

本文共 1230 字,大约阅读时间需要 4 分钟。

hot3.png

problem:因屏幕或文本域等太小,想扩大屏幕(全屏)

solve:

//先封装好方法

//进行切换var fullScreenClickCount=0; //调用各个浏览器提供的全屏方法var handleFullScreen = function () {    var de = document.documentElement;    if (de.requestFullscreen) {        de.requestFullscreen();    } else if (de.mozRequestFullScreen) {        de.mozRequestFullScreen();    } else if (de.webkitRequestFullScreen) {        de.webkitRequestFullScreen();    } else if (de.msRequestFullscreen) {        de.msRequestFullscreen();    }    else {        wtx.info("当前浏览器不支持全屏!");    }};//调用各个浏览器提供的退出全屏方法var exitFullscreen=function() {    if(document.exitFullscreen) {        document.exitFullscreen();    } else if(document.mozCancelFullScreen) {        document.mozCancelFullScreen();    } else if(document.webkitExitFullscreen) {        document.webkitExitFullscreen();    }}

//获取.fullscreen样式(选择器)的点击事件,再该事件中调用已封装好的方法

$(".fullscreen").click(function () {    if (fullScreenClickCount % 2 == 0) {        handleFullScreen();    } else {        exitFullscreen();    }    fullScreenClickCount++;});

//这里仅用一个样式实现切换全屏退屏,关键点是判断浏览器实现全屏退屏的方法

完整的例子如下:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>    fullscreen test    

点击之前

点击之后

转载于:https://my.oschina.net/u/3378039/blog/1576555

你可能感兴趣的文章
Python核心编程第十章
查看>>
qcow2 转 lv (kvm)
查看>>
Hexo、GitPage书写博客
查看>>
HTML5 异步上传文件
查看>>
关于 xshell ssh登录 virtualbox linux虚拟机问题的解决办法
查看>>
JBoss 系列六十二:深入理解 jBPM Human Task - II(使用JMS做传输媒介执行Human Task)...
查看>>
配置gitlab的web hook,当git库的某个分支有提交时,自动触发jenkins的job
查看>>
基于 Spring Boot 编写控制台程序
查看>>
samba服务器的安装
查看>>
nginx添加第三方模块,以及启用nginx本身支持的模块
查看>>
(转)由12306.cn谈谈网站性能技术
查看>>
PHP MySQL操作类(基于PDO)
查看>>
IOS——定位单元格子视图
查看>>
HTML DIV+CSS制作通栏总结
查看>>
Ubuntu 14.0.4下 JDK + Tomcat + Intellij IDEA 安装配置
查看>>
【设计模式】链接模式
查看>>
编程思想之回调
查看>>
Mac下如何获取JAVA_HOME路径
查看>>
LockSupport和synchronized混合死锁问题
查看>>
左旋转字符串
查看>>