hook实现元素放大浏览

前言

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

还是先来看看效果

正文

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

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

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

确定移动距离和缩放大小

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

js 复制代码
let transformX = screenWidth / 2 - (left + width / 2)
let transformY = screenHeight / 2 - (top + height / 2)

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

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

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

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

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

页面大小发生变化

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

结语

仓库地址

感兴趣的可以去试试

相关推荐
Eighteen Z6 分钟前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录13 分钟前
虚拟DOM
前端·vue.js·dom
爱学习的茄子13 分钟前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神14 分钟前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
摆烂为不摆烂18 分钟前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端
1024小神19 分钟前
cocos游戏开发中,如何制作一个空气墙
前端·javascript
爱编程的喵19 分钟前
深入理解JavaScript事件循环机制:从同步到异步的完整解析
前端·javascript
202620 分钟前
11. vite打包优化
前端·javascript·vite
拾光拾趣录25 分钟前
组件封装的⼀些基本准则
前端·前端工程化
CAD老兵26 分钟前
TypeScript 中如何转换两个具有相同值的枚举类型?
前端