关闭

js之切换全屏和退出全屏实现

时间: 2019-08-01阅读: 891标签: 效果

应用场景:

比如很多网页游戏全屏之类的,或者是网上看小说等。


核心代码:

//控制全屏
function enterfullscreen() { //进入全屏
    $("#fullscreen").html("退出全屏");
    var docElm = document.documentElement;
    //W3C
    if(docElm.requestFullscreen) {
        docElm.requestFullscreen();
    }
    //FireFox
    else if(docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
    }
    //Chrome等
    else if(docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
    }
    //IE11
    else if(elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    }
}

function exitfullscreen() { //退出全屏
    $("#fullscreen").html("切换全屏");
    if(document.exitFullscreen) {
        document.exitFullscreen();
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    } else if(document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

var a = 0;
$(‘#fullscreen‘).on(‘click‘, function() {
    a++;
    a % 2 == 1 ? enterfullscreen() : exitfullscreen();
})


前端代码:

<a type="button" id="fullscreen" class="btn btn-default visible-lg visible-md"><i class="fa fa-refresh" aria-hidden="true"></i> 切换全屏</a>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5080

关闭

Vue实现网页放大镜效果

组件使用less,请确保已安装loader,本组件为放大镜组件,传参列表为:width: 必传,设置放大镜的宽高(正方形),放大区域等同,放大倍数为2倍,picList:必传,传入图片列表

JavaScript 实现打字机效果,跑马灯效果

这篇文章在不使用任何插件的情况,以最简洁的原生javascript来实现打字机效果和跑马灯效果。打字效果即把一段话一个字一个字的显示出来。

纯代码为网站站点添加雪花飘落效果

网站站点添加雪花飘落效果,本段js代码依赖 JQurey,如果没效果,请确认网页是否已载入 JQurey 。代码如下:

多种方式实现吸顶效果

还是前两天的那个唱歌中间页,上线前发现滚动时候体验不好。因为之前没有做吸顶效果,搜索内容然后滚下去,没有找到内容需要再手动划上来。

实现一个div的拖拽效果

实现思路:鼠标按下开始拖拽,记录摁下鼠标时的鼠标位置以及元素位置,拖动鼠标记下当前鼠标的位置,鼠标当前位置-摁下时鼠标位置= 鼠标移动距离

Vue 中多个元素、组件的过渡,及列表过渡

多元素之间如何实现过渡动画效果呢?这么写行不行呢?肯定是不行的,因为 Vue 在两个元素进行切换的时候,会尽量复用dom,就是因为这个原因,导致现在动画效果不会出现。如果不让 Vue 复用dom的话,应该怎么做呢?只需要给这两个div不同的key值就行了

使用CSS实现逼真的水波纹点击效果

虽然webkit具有遮罩的能力(webkit mask),不过webkit虽然强大,但在跨浏览器上总是它的罩门,况且在性能上也是往往会造成困扰(这也是为什么chrome要这么吃资源了),因此撇开webkit不谈,我们该用什么方法,才可以做出水波纹的效果呢?

CSS :placeholder-shown伪类实现Material Design占位符交互效果

Material Design风格占位符交互效果官方示意见此demo页面。现在这种设计在移动端很常见,相信不少人设计项目中有实现过这种交互,而且,大部分是利用JS实现的。(ps:weex 不支持这个样式)

CSS垂直翻转/水平翻转

随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能。相关的CSS代码如下:

原生js实现放大镜效果

我们平时在电商网站购物时,需要对选取的某一个商品进行详情查看,此时当鼠标在商品图片上某一部分移动查看时旁边就会出现一个该部分图片的放大效果,这样就能够更好的对商品进行分析,下面就使用原生js来实现一下类似放大镜的效果

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!