hook实现元素放大浏览

前言

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

还是先来看看效果

正文

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

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

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

确定移动距离和缩放大小

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

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

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

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

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

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

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

页面大小发生变化

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

结语

仓库地址

感兴趣的可以去试试

相关推荐
zwjapple29 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
伍哥的传说3 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python