hook实现元素放大浏览

前言

之前看到一个效果元素的放大浏览，看起来挺有意思的。现在也来试着用hook来实现一个这样的效果。后面有代码地址。

还是先来看看效果

正文

实现元素放大浏览的原理也很简单，使用fixed定位再配合translate来移动、缩放。

过程中要处理的几个问题：

1. 确定移动的距离和缩放大小
2. 怎么放大浏览时，页面中其他元素位置不受影响
3. 在页面大小发生变化时，怎么处理

确定移动距离和缩放大小

元素中心点到屏幕中心点移动距离可以根据以下的公式算出，left和top为元素在页面中的位置。

let transformX = screenWidth / 2 - (left + width / 2)
let transformY = screenHeight / 2 - (top + height / 2)

对于放大比例的确定，我们只要计算放大浏览元素宽高和屏幕大小的比例，选择小的那个就可以了（选择大的会使屏幕装不下元素）

放大浏览时，页面中其他元素位置不受影响

这个的原理也简单，我们只要在元素放大浏览时在同一个位置创建一个一模一样的元素放在原来位置就可以了。

复制放大浏览元素样式，并隐藏元素

放大浏览时插入占位元素，否则移除占位元素

页面大小发生变化

在页面大小发生变化时，只需要重新计算移动距离和放大比例就可以了

结语

仓库地址

感兴趣的可以去试试