图片预览引发的思考 zoomerang.js 解析

zoomerang.js - https://github.com/yyx990803/zoomerang

项目开发的时候,会遇到预览大图的功能,虽然一般使用的element中也有对应的预览组件,不过去搜索还是会有收获,就是无意之间发现了尤雨溪编写的图片放大插件

便于学习,我把的部分api列举进行一个复习,以下所有的使用都可以在上面的git地址下的js文件中看到,而其中的html文件本身就是很好的例子

// 获取样式 其中名称前面的get限制它本身只可以用于读取样式,修改样式的话可以使用ele.style进行修改
getComputedStyle

let div = document.getElementById('div')
let style = window.getComputedStyle(div)

// 创建元素 最开始学习js的时候,使用createElement动态创建元素
createElement

let div = document.createElement('div')

// 获取dom
querySelector

document.querySelector('.page-content') 

// 获取dom 返回的是一个数组 可以通过操作下标获取指定的dom
querySelectorAll

document.querySelectorAll('.page-content') 

// 用于获取某个元素相对于视窗的位置集合 插件中使用到了width,height.left,top四个属性
getBoundingClientRect

let el = document.querySelector('.page-content')
let obj = el.getBoundingClientRect()

obj = {    
bottom: 1388.53125
height: 1495.53125
left: 155.5
right: 890
top: -107
 734.5
x: 155.5
y: -107
      }   

// 向节点前添加子节点
insertBefore

// 向节点后添加子节点
appendChild

// 节点移除
removeChild

// 添加监听事件
addEventListener

// 移除监听事件
removeEventListener