买专利卖专利找龙图腾，真高效！ 查专利查商标用IPTOP,全免费！专利年费监控用IP管家,真方便！

申请/专利权人：一网互通(北京)科技有限公司

摘要：本发明实施例中提供了一种基于React鼠标悬停的图片放大特效形成方法及装置，属于图像处理技术领域，该方法包括：创建ImageItem组件，所述ImageItem组件接收用于渲染图片的src属性；创建Accordion组件，所述Accordion组件包含多个ImageItem子组件；在ImageItem组件中定义图片的基础样式，通过hovered状态动态应用悬停样式；当判断出当前图片处于悬停状态时，放大图片，并调整图片容器的宽度，以实现图片的放大效果。本方案能够提高了图片的特效性能以及图片特效在不同浏览器中的兼容性。

主权项：1.一种基于React鼠标悬停的图片放大特效形成方法，其特征在于，包括：创建ImageItem组件，所述ImageItem组件接收用于渲染图片的src属性，在ImageItem组件内使用useState钩子管理一个布尔类型的状态hovered，用于表示当前图片是否处于悬停状态；创建Accordion组件，所述Accordion组件包含多个ImageItem子组件，使用CSSFlexbox布局将ImageItem组件横向排列，在Accordion组件内定义一个图片路径数组，并使用数组的map方法动态渲染多个ImageItem组件；在ImageItem组件中定义图片的基础样式，通过hovered状态动态应用悬停样式，使用CSStransition属性定义图片放大和缩小的过渡效果；在ImageItem组件中，使用onMouseEnter和onMouseLeave事件处理函数来更新hovered状态，使用styled-components中的样式属性，根据hovered状态应用不同的样式，当判断出当前图片处于悬停状态时，放大图片，并调整图片容器的宽度，以实现图片的放大效果；所述创建Accordion组件，包括：在Accordion组件内部定义一个图片路径数组，使用map方法遍历图片路径数组，为每个路径创建一个ImageItem组件实例，使用CSSFlexbox布局将ImageItem组件横向排列，在CSS中添加媒体查询以适配不同屏幕尺寸；使用Flexbox布局将ImageItem组件横向排列，并设置预设值的间距，响应式设计中，使用媒体查询来更改布局；Accordion组件通过React的回调函数ContextAPI获知ImageItem的状态，在ImageItem组件中，使用props传递所述回调函数；在Accordion组件设置图片处理函数，当图片数量超过预设值时，对图片进行性能优化处理。

全文数据：

权利要求：

百度查询： 一网互通(北京)科技有限公司 基于React鼠标悬停的图片放大特效形成方法及装置