平衡Dom总结
- 介绍: 新的项目中有些Dom元素需要和画布保持统一个适配比例
- 项目地址: 宝岛之光-台湾偶像剧
遇到的问题
- H5项目使用Canvas, 适配采用保持宽高比例, 上下或者左右留白方式
- 在项目中有些Dom元素, 例如用来放Gif的
<Img>
, 还有<Video>
, 和输入框<Input>
- 这些元素的适配方式, 和画布无法保持同步, 造成开发上的时间浪费.
- 两个难点
- 直接传入设计图上的宽高,无需计算, 即可达到想要的效果
- 宽高等属性可直接计算, 但上下左右, 可能留白, 造成位置偏差
实现方式
思路
- 传入Dom元素, 直接设置不需要计算的属性
- 保存需要不断计算的属性
- 设计监听, 即当选中屏幕的时候, 可自动改变
- 并主动进行一次计算
- 计算过程分为两种情况
计算情况
- 注意: 位置元素只能使用top和lfet!!!
- 非top或者left, 不受位置影响的计算属性, 可以直接进行计算
- top, 和lfet, 位置元素
- 判断当前是否为上下留白, 如果是正好的话, 直接计算即可
- 宽变多了, 过于宽了, 左右留白, 计算按照原始比例, 宽的长度, 再计算出需要移动的宽的一半
- 上下留白同理
使用方式
正常使用
- 注意: 位置元素只能使用top和lfet!!!
- 正常使用过程, 直接设置属性和值即可, Number类型的属性, 是需要计算的
new NewDom(document.getElementById('videoQ1'), {
top: 386,
left: 50,
width: 660,
height: 380
}).listenChange()
设置居中
- 居中不能进行数值的设置
- 设置居中的过程, 也就是让宽高是50%即可
new NewDom(document.getElement('img')), {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 750,
height: 1464
}).listenChange()
具体实现代码
const width = Symbol('w')
const height = Symbol('y')
const dom = Symbol('dom')
const storeStyle = Symbol('storeStyle')
export default class NewDom {
constructor (domInstance, style) {
this.setWidthAndHeight(750, 1464)
if (!this.judgeDom(domInstance)) throw new Error('参数类型错误')
this[dom] = domInstance // dom实例
this[storeStyle] = {} // 存储所有变换的值
Object.keys(style).forEach(key => {
if (typeof style[key] === 'number') {
this[storeStyle][key] = style[key] // 收集所有变化的值
} else {
this[dom].style[key] = style[key]
}
})
}
setWidthAndHeight (w, h) {
if (typeof w === 'number' && typeof h === 'number') {
this[width] = w
this[height] = h
} else {
throw new Error('需要传入数字类型的宽高')
}
return this
}
judgeDom (obj) { // 判断是否为dom
if (typeof HTMLElement === 'object') {
return obj instanceof HTMLElement
} else {
return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string'
}
}
listenChange () {
let timer
this.autoChange()
window.addEventListener('orientationchange', () => {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
this.autoChange()
}, 1500)
})
return this
}
fouceSetStyle (key, value) { // 强行更改属性
this[dom].style[key] = value
}
autoChange () {
const style = this[storeStyle]
const shouldScaleWidth = innerWidth / this[width]
const shouldScaleHeight = innerHeight / this[height]
const scale = Math.min(shouldScaleWidth, shouldScaleHeight)
Object.keys(style).forEach(key => {
if (shouldScaleWidth > shouldScaleHeight && key === 'left') { // 宽变化多, 左右留白
const vacancy = innerWidth - this[width] * scale
this[dom].style.left = `${style[key] * scale + vacancy / 2}px`
} else if (shouldScaleWidth < shouldScaleHeight && key === 'top') { // 上下留白
const vacancy = innerHeight - this[height] * scale
this[dom].style.top = `${style[key] * scale + vacancy / 2}px`
} else {
this[dom].style[key] = `${style[key] * scale}px`
}
})
return this
}
}
平衡Dom总结的更多相关文章
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- 虚拟DOM
传统的 DOM 操作是直接在 DOM 上操作,当需要修改一系列元素中的值时,就会直接对 DOM 进行操作.如果需要操作的DOM元素过多,则成本太高,而采用 Virtual DOM 则会对需要修改的 D ...
- HTMLElement.hidden; CSS Attr Selectors的用处; DOM的className方法; ::before和::after伪元素
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden https://codepen.io/pen/ <elem ...
- 2018.7.22 Jdom与dom的区别
SAX 优点:①无需将整个文档加载到内存,因而内存消耗少 ②推模型允许注册多个ContentHandler 缺点:①没有内置的文档导航支持 ②不能够随机访问XML文档 ③不支持在原地修改XML ④不支 ...
- 浅谈DOM事件的优化
在 JavaScript 程序的开发中,经常会用到一些频繁触发的 DOM 事件,如 mousemove.resize,还有不是那么常用的鼠标滚轮事件:mousewheel (在 Firefox 中,滚 ...
- 关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 页面嵌入dom与被嵌入iframe的攻防
1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...
- 通俗易懂的来讲讲DOM
DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...
随机推荐
- How does a browser know which response belongs to which request?
Today I knows that the server never send a request to a client! It just make response~ So,if the bro ...
- Typeof() 和 GetType()区别
1.typeof(x)中的x,必须是具体的类名.类型名称等,不可以是变量名称. 2.GetType()方法继承自Object,所以C#中任何对象都具有GetType()方法,它的作用和typeof() ...
- Java通过JDBC连接SQL Server
下载Microsoft JDBC Driver 4.0 for SQL Server 在这里下载:http://www.microsoft.com/zh-cn/download/details.asp ...
- ESP8266开发环境、编译、烧录
官方地址 中:http://www.espressif.com/zh-hans/support/download/overview?keys=&field_type_tid[]=14 英:ht ...
- axios替换jquery的ajax
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <scr ...
- 虚拟机不能桥接联网 vmnet0上的网桥当前未运行
win10家庭版更新到内测版后,原来可以正常桥接工作的虚拟机ubuntu不能在桥接模式下联网和ssh连接了,因为获取不到IP地址了. 上网搜索一下,发现直接粗暴的方法--修复VMware Workst ...
- Django—model系统:ORM之其他骚操作
Django ORM执行原生SQL # extra # 在QuerySet的基础上继续执行子语句 # extra(self, select=None, where=None, params=None, ...
- Ubuntu安装Python 3.6之编译安装+使用PPA源安装
下面分别详细介绍一下Ubuntu 14.04/16.04安装Python 3.6的两种方法: 方法一 自己编译安装: # 安装编译必需的软件包 sudo apt install build-essen ...
- 09_Redis_消息订阅与发布
一:Redis 发布订阅 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. Redis 客户端可以订阅任意数量的频道. 下图展示了频道 c ...
- 学习Shell编程
目录 1 什么是Shell 2 Linux的启动过程 3 怎样编写一个Shell脚本 4 Shell脚本的执行方式 5 内建命令和外部命令的区别 6 管道和重定向 7 变量赋值 8 环境变量配置文件 ...