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

雨点打透心脏的1/2处 2021-08-29 13:35 277阅读 0赞

## 前言 ##

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

## 效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 1]

## 实现 ##

**源码：**

// 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**
> 
> 微信公众号：**前端历劫之路**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 2][]

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210813/a581871fded04c2e9873498b73e26676.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 1]: /images/20210813/4d10a6752ea04f03bed3d4ef141f247e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 2]: /images/20210813/2d0ba73000984bc4af390fcdf243c60e.png