送你一个封装的移动端横屏展示的JS库

前言

我们经常在移动端横屏展示一些东西，所以今天我们来介绍下怎么在移动端实现横屏展示。
效果

实现

源码：

// screenOrientation.js
export default function (option) {
    var _this = this;
    _this.option = {
        'mode': 'portrait', //portrait(竖屏)、landscape(横屏)
        'id': 'wrap', //最外层容器ID
        'init': false,
        'callback': false
    };
    for (var k in option)
        if (option[k] != '') _this.option[k] = option[k];
    var obj = document.getElementById(_this.option.id);
    var className = obj.className || " ";
    var w_width = obj.clientWidth;
    var w_height = obj.clientHeight;
    var flag = 0;
    var timer;
    if (_this.option.mode == "portrait")
        var cssBlock =
            '.' + _this.option.id + '_screenOrientation{-webkit-transform: rotateZ(-90deg) !important; transform: rotateZ(-90deg); position:relative;}';
    else
        // eslint-disable-next-line no-redeclare
        var cssBlock =
            '.' + _this.option.id + '_screenOrientation{-webkit-transform: rotateZ(90deg) !important; transform: rotateZ(90deg); position:relative;}';
    var style = document.createElement("style");
    style.type = "text/css";
    style.textContent = cssBlock;
    document.getElementsByTagName("head").item(0).appendChild(style);
    var _width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    var _height = (window.innerHeight > 0) ? window.innerHeight : screen.height;
    _this.modifyDetec = function () {
        if ((_height < _width && _this.option.mode == "portrait") || (_height > _width && _this.option.mode == "landscape") && flag == 0) {
            obj.style.width = _height + "px";
            obj.style.height = _width + "px";
            obj.style.top = -(_width - _height) * 0.5 + "px";
            obj.style.left = -(_height - _width) * 0.5 + "px";
            obj.className = className + " " + (_this.option.id + "_screenOrientation");
            flag = 1;
            if (_this.option.callback) {
                _this.option.callback();
            }
        } else {
            obj.style.width = w_width + "px";
            obj.style.height = w_height + "px";
            obj.className = className;
            obj.style.top = " ";
            obj.style.left = " ";
            flag = 0;
        }
    }

    function detectOtt() {
        _width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
        _height = (window.innerHeight > 0) ? window.innerHeight : screen.height;
        if (window.orientation == 180 || window.orientation == 0 || window.orientation == 90 || window.orientation == -90) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                _this.modifyDetec(_width, _height);
            }, 50);

        }
    }
    if (_this.option.init) {
        _this.option.init();
    }
    detectOtt();
    window.addEventListener("resize", detectOtt, false);

}

使用：

import screenOrientation from './screenOrientation.js'

// 方法
screen(){
  // portrait(竖屏)、landscape(横屏)
  // id : 最外层容器DOM元素ID
  new screenOrientation({ mode:'landscape', id:'wrap'})
}

结语

作者：Vam的金豆之路

主要领域：前端开发

我的微信：maomin9761

微信公众号：前端历劫之路