react中如何在一张图片上加一个灰色蒙层,并添加事件?

最终效果:

实现原理:

  1. 移动到图片上的时候,给img加一个伪类
    !!此时就要地方要注意了,因为img标签是闭合的标签,无法直接添加 伪类(::after),所以
    我是在img外层加了一个span标签,方便加上伪类,实现浮层的效果
  2. 给元素绑定对应的点击事件

废话不多说,上代码!!!!

typescript 复制代码
// 鼠标移动到图片时,将图片包裹在span标签中
  const handleHover = (event: any) => {
    if (event.target.tagName.toLowerCase() === 'img') {
      // 确保只对img标签进行操作
      const imgElement = event.target;
      // 检查img元素是否已经被包裹在一个具有'class="wrapper"'的div里
      if (
        imgElement.parentNode &&
        imgElement.parentNode.tagName.toLowerCase() === 'span' &&
        imgElement.parentNode.classList.contains('wrapper')
      ) {
        return; // 如果已经包裹了就退出函数
      }

      // 创建一个新的div元素
      const wrapper = document.createElement('span');
      wrapper.className = 'wrapper'; // 给新的div设置类名以便于CSS控制

      // 将img元素插入到新的div中
      imgElement.parentNode.insertBefore(wrapper, imgElement); // 在img之前插入wrapper
      wrapper.appendChild(imgElement); // 把img移到wrapper里
    }
  };

  useEffect(() => {
    window.addEventListener('click', handleClickHtmlContent);

    const container: any = document.getElementById('container');

    // 监听所有img标签的mouseover事件
    container?.addEventListener('mouseover', handleHover);

    return () => {
      window.removeEventListener('click', handleClickHtmlContent);
      container?.removeEventListener('mouseover', handleHover);
    };
  }, []);



// 点击html渲染区域的图片时,调起Antd组件Image的预览
  const handleClickHtmlContent = (e: any) => {
    if (e.target.closest('#container p .wrapper')) {
      const url = e.target.querySelector('img')?.src;
      Modal.confirm({
        title: '确认发送该图片?',
        centered: true,
        icon: null,
        content: (
          <img width={360} src={url} />
        ),
        okText: '确认',
        onOk: () => {
          console.log('确认发送');
        },
      });
    }
  };


// html
<div id="container">
 <img src="123.png"/>
</div>


// css

#container {
  .wrapper {
    position: relative;
    display: inline-block;
    &:hover {
      cursor: pointer;
      box-shadow: 0 0 5px #ccc;
      &::after {
        opacity: 1;
      }
    }
    &::after {
      content: '点击发送图片';
      position: absolute;
      text-align: center;
      align-content: center;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      max-height: 250px;
      color: #fff;
      background: rgba(0, 0, 0, 0.5); /* 示例背景色 */
      opacity: 0; /* 初始状态隐藏 */
      transition: opacity 0.3s ease; /* 添加过渡效果 */
    }
  }
  img {
    max-height: 250px;
    width: auto !important;
  }
}
相关推荐
Black蜡笔小新1 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
秦jh_2 小时前
【Linux】多线程(概念,控制)
linux·运维·前端
蜗牛快跑2132 小时前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy2 小时前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪3 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞3 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-3 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与3 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun3 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇3 小时前
ES6进阶知识一
前端·ecmascript·es6