hook实现元素放大浏览

前言

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

还是先来看看效果

正文

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

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

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

确定移动距离和缩放大小

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

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

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

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

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

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

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

页面大小发生变化

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

结语

仓库地址

感兴趣的可以去试试

相关推荐
一斤代码40 分钟前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子43 分钟前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子1 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina1 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路2 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_2 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码2 小时前
1.
react.js·node.js·angular.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app