老是不通过，没办法，只能是重新发布了，反正我就是杠上了，大大小小写过很多前端特效，当然也经常在网上copy或者修改人家的代码，我觉得也挺好的，为什么？！因为我想这样，你能怎么办，打我？
少废话，直接上代码，
JS代码



function fullScreen(el) {

    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,

        wscript;

    if(typeof rfs != "undefined" && rfs) {

        rfs.call(el);

        return;

    }

    if(typeof window.ActiveXObject != "undefined") {

        wscript = new ActiveXObject("WScript.Shell");

        if(wscript) {

            wscript.SendKeys("{F11}");

        }

    }

}

function exitFullScreen(el) {

    var el= document,

        cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,

        wscript;

    if (typeof cfs != "undefined" && cfs) {

      cfs.call(el);

      return;

    }

    if (typeof window.ActiveXObject != "undefined") {

        wscript = new ActiveXObject("WScript.Shell");

        if (wscript != null) {

            wscript.SendKeys("{F11}");

        }

  }

}

HTML代码
最近受了一点点小刺激，对自己做的工作产生迷茫，不知道还要做这个做多久，还有我其实还是喜欢设计多一些，还有我喜欢设计，但是设计太难了，经常觉得自己做的东西跟别人的，比起来差个好几万块钱，Why?你问我，我问谁。好吧，我也很无赖。
举个小小例子，随便来一个按钮试试，按钮上在来个点击事件切换。



<html id="Content">

    <body>

        <ul>

            <li>

                <a id="BtnFullOpen" href="javascript:void(0);" title="按“F11”进入全屏模式">

                    <i class="ace-icon fa fa-arrows-alt"></i>全屏查看

                </a>

                <a id="BtnFullQuite" href="javascript:void(0);" title="按“F11”关闭全屏模式" style="display:none;">

                    <i class="ace-icon fa fa-arrows-alt"></i>全屏关闭

                </a>

            </li>

            <li>2</li>

            <li>3</li>

            <li>5</li>

        </ul>

    </body>

</html>

记得一定要加上调用代码，调用代码，调用代码，说三遍...
JS调用代码



var oBtnFullOpen = document.getElementById('BtnFullOpen');

var oContent = document.getElementById('Content');

oBtnFullOpen.onclick = function() {

    fullScreen(oContent);

    oBtnFullQuite.setAttribute("style", "display:block");

    oBtnFullOpen.setAttribute("style", "display:none");

}

var oBtnFullQuite = document.getElementById('BtnFullQuite');

oBtnFullQuite.onclick = function() {

    exitFullScreen(oContent);

    oBtnFullQuite.setAttribute("style", "display:none");

    oBtnFullOpen.setAttribute("style", "display:block");

};

只做个人备忘，不做任何发表，不做信息交流。
尽管拿去用，不谢！

原文地址：https://segmentfault.com/a/1190000015709926

JS 实现全屏预览 F11功能的更多相关文章

  1. IOS 图片全屏预览

    如果你感觉累,那就对了那是因为你在走上坡路..这句话似乎有点道理的样子,时常提醒自己无论走到哪都不要忘记自己当初为什么出发.有时想想感觉有的东西可以记录一下,就把它记录下来吧,这次想写一下关于单张图片 ...

  2. IOS中实现图片点击全屏预览

    //// ViewController.m// XWZoomImageView//// Created by xiao on 15/11/13.// Copyright © 2015年 xiao. A ...

  3. 图片无损放大软件PhotoZoom分屏预览功能 ，简直好用！

    PhotoZoom是一款智能放大图片软件,很多用户在初次使用PhotoZoom,发现图片所处的区域上方有四个不同方式的预览选项.因为很多初学者使用时不明白这四个按钮有什么作用,所以小编接下来讲解一下P ...

  4. JS实现上传图片的三种方法并实现预览图片功能

    地址:http://www.jb51.net/article/118660.htm js HTML5拖拽图片预览 地址:http://www.jb51.net/article/88803.htm js ...

  5. JS实现的图片预览功能

    之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...

  6. input file样式修改，图片预览删除功能

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...

  7. Android 10开发者预览版功能介绍

    Android P的开发者预览版最亮眼的功能莫过于支持“刘海屏”等屏幕显示.同样在适配可折叠设备方面,Android Q的第一个开发者预览版也很“接地气”,谷歌早在去年11月就发布了对可折叠设备的支持 ...

  8. js控制全屏及退出全屏

    js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...

  9. 本地存储数据库indexedDB实现离线预览的功能

    今天在学习<高级JS编程>,看到离线存储,cookie和session都十分的熟悉,但是书中还提到了indexedDB和webSQL(已废弃),indexedDB可以像mysql一样建表, ...

随机推荐

  1. 洛谷P2082 区间覆盖(加强版)（珂朵莉树）

    传送门 虽然是黄题而且还是一波离散就能解决的东西 然而珂朵莉树还是很好用 相当于一开始区间全为0,然后每一次区间赋值,问最后总权值 珂朵莉树搞一搞就好了 //minamoto #include< ...

  2. 洛谷P2384 最短路（dijkstra解法）

    题目背景 狗哥做烂了最短路,突然机智的考了Bosh一道,没想到把Bosh考住了...你能帮Bosh解决吗? 他会给你100000000000000000000000000000000000%10金币w ...

  3. Hdu 5358 First One (尺取法+枚举)

    题目链接: Hdu 5358 First One 题目描述: 数组a有n个元素,S[i,j]定义为a[i]+a[i+1]+.....+a[j],问:这个死东西等于多少? 解题思路: 二分肯定超,这个题 ...

  4. _bzoj1015 [JSOI2008]星球大战starwar【并查集】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1015 倒过来做就ok了. #include <cstdio> #include ...

  5. 最短路(Dijkstra) HDOJ 4318 Power transmission

    题目传送门 题意:起点s到终点t送电,中途会有损耗,问最小损耗是多少 分析:可以转换为单源最短路问题,用优先队列的Dijkstra版本,d[]表示从s出发到当前点的最小损耗,用res保存剩下的电量.当 ...

  6. multiset || 线段树 HDOJ 4302 Holedox Eating

    题目传送门 题意:一个长度L的管子,起点在0.n次操作,0 p表示在p的位置放上蛋糕,1表示去吃掉最近的蛋糕(如果左右都有蛋糕且距离相同,那么吃同方向的蛋糕),问最终走了多少路程 分析:用multis ...

  7. 贪心 Codeforces Round #236 (Div. 2) A. Nuts

    题目传送门 /* 贪心:每一次选取最多的线段,最大能放置nuts,直到放完为止,很贪婪! 题目读不懂多读几遍:) */ #include <cstdio> #include <alg ...

  8. 题解报告：poj 3061 Subsequence（前缀+二分or尺取法）

    Description A sequence of N positive integers (10 < N < 100 000), each of them less than or eq ...

  9. sed练习简记

    1. 使用多命令选项-e sed -e 'command1' -e 'command2' -e 'command3' 在/etc/passwd文件中搜索root.nobody或mail [root@s ...

  10. 配置Oracle网络服务

    Oracle网络服务是什么呢? Oracle网络服务是客户端访问数据库服务器端才需要配置的,也就是说,你的Oracle数据库没有装在你自己的电脑上,你需要去访问别人电脑上的Oracle数据库,那么你就 ...