美文网首页
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