苏州seo网站公司,精品网站建设费用 尖端磐石网络,保健品网站dede模板,苏州住房与城乡建设局网站#x1f475;博主#xff1a;小猫娃来啦 #x1f475;文章核心#xff1a;开源一个react封装的图片预览组件 文章目录 组件开源代码下载地址运行效果展示实现思路使用思路和api实现的功能数据和入口部分代码展示 组件开源代码下载地址
Gitee#xff1a;点此跳转下载 CSDN…
博主小猫娃来啦 文章核心开源一个react封装的图片预览组件 文章目录 组件开源代码下载地址运行效果展示实现思路使用思路和api实现的功能数据和入口部分代码展示 组件开源代码下载地址
Gitee点此跳转下载 CSDN点此跳转下载 运行
装依赖
npm i 运行
npm start打开
http://localhost:3000/效果展示 实现思路
创建一个React函数组件并命名为ImageGallery。在组件内部使用useState钩子来定义状态变量并初始化为合适的初始值。 selectedImageUrl来追踪当前选中的图片URL isOpen来追踪模态框的显示状态 zoomLevel来追踪图片的缩放级别 rotateDeg来追踪图片的旋转角度 flipState来追踪图片的翻转状态等。 渲染组件时使用map()方法遍历传入的图片URL数组并为每个元素创建一个缩略图。为每个缩略图添加点击事件处理函数以便在点击时更新selectedImageUrl和isOpen的状态。在模态框中根据isOpen的状态决定是否显示模态框。如果isOpen为真则显示模态框。在模态框中显示选中的大图。根据zoomLevel和rotateDeg应用相应的样式来缩放和旋转图片。 使用CSS的transform属性来实现缩放和旋转效果。 在模态框中添加放大、缩小、旋转和翻转的功能按钮。为每个按钮添加点击事件处理函数以便在点击时更新相应的状态变量如zoomLevel、rotateDeg和flipState。为模态框添加键盘事件监听。根据按下的键码来触发不同的操作例如切换图片、放大缩小等功能。实现拖拽功能通过鼠标事件监听鼠标按下、移动和松开的过程在对应的事件处理函数中计算鼠标位移距离并更新图片的位置。添加全屏展示功能。为模态框添加全屏按钮并在点击时调用浏览器的Fullscreen API来进入或退出全屏模式。 使用思路和api
我觉得react没有顺手的图片预览组件然后就自己封装一个放在项目文件里自己本地导入使用需要微调。也不用担心组件之间的高耦合度自己也可以控制。
API全部在代码里手动微调即可。 实现的功能
拖拽上下左右翻转、旋转全屏缩放缩略图高亮 具体描述如下缩放级别等数据可以自己改。在哪里改都有注释非常清晰
点击缩略图可以在模态框中展示选中的图片并带有高亮。可以放大和缩小图片最大放大到130%最小缩小到30%。可以旋转图片左旋转和右旋转分别是每次旋转90度。可以上下翻转和水平翻转图片点击按钮可以进行翻转和恢复默认状态。可以使用键盘的箭头键进行上一张和下一张图片的切换同时也支持使用键盘的上下箭头进行放大和缩小。可以通过拖拽图片进行位置的调整鼠标按下开始拖拽松开结束拖拽。可以进入全屏模式查看图片再次点击退出全屏。在模态框中显示缩略图点击缩略图可以切换到相应的图片。 数据和入口
数据是在APP.jsx里的data可以换成接口请求到的图片数组 数据入口是在APP.jsx里的ImagePreview images{images}/ImagePreview标签上这个images就是data这个图片数组 部分代码展示
⭐⭐⭐⭐⭐css ⭐⭐⭐⭐⭐jsx
