美文网首页
cocos web 包加载动画横屏

cocos web 包加载动画横屏

作者: __笙歌4J | 来源:发表于2019-07-25 11:28 被阅读0次

    1.修改index.html

    将 index.html的
    <div id="splash">
    改为
    <div id="splash" style="display: none">

    2.修改main.js

    在main.js
    var splash = document.getElementById('splash');

    这一行后面加上如下代码

    //####
        let width = document.documentElement.clientWidth;
        let height = document.documentElement.clientHeight;
        if (width < height) {
            splash.style.cssText  = `position:absolute;top:${(height - width) / 2}px;left:${0 - (height - width) / 2}px;\
            width:${height}px;height:${width}px;transform:rotate(90deg);transform-origin:50% 50%;`;
        }
    
        let evt = "onorientationchange" in window ? "orientationchange" : "resize";
    
        window.addEventListener(
        evt,
        function() {
            let width = document.documentElement.clientWidth;
            let height = document.documentElement.clientHeight;
            if (width > height) {
                splash.style.cssText  = `position:absolute;top:0px;left:0px;\
            width:${width}px;height:${height}px;transform:none;transform-origin:50% 50%;`;
            } else {
                splash.style.cssText  = `position:absolute;top:${(height - width) / 2}px;left:${0 - (height - width) / 2}px;\
            width:${height}px;height:${width}px;transform:rotate(90deg);transform-origin:50% 50%;`;
            }
        },
        false
        );
    
    //####
    

    相关文章

      网友评论

          本文标题:cocos web 包加载动画横屏

          本文链接:https://www.haomeiwen.com/subject/pgicrctx.html