最终效果:
实现原理:
- 移动到图片上的时候,给img加一个伪类
!!此时就要地方要注意了,因为img标签是闭合的标签,无法直接添加 伪类(::after),所以
我是在img外层加了一个span标签,方便加上伪类,实现浮层的效果 - 给元素绑定对应的点击事件
废话不多说,上代码!!!!
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;
}
}