送你一個(gè)封裝的移動(dòng)端橫屏展示的JS庫

前言

我們經(jīng)常在移動(dòng)端橫屏展示一些東西，所以今天我們來介紹下怎么在移動(dòng)端實(shí)現(xiàn)橫屏展示。
效果





































































































































實(shí)現(xiàn)

源碼：

// 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'})
}

 

結(jié)語


作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路