鼠标放在图片连接上显示图片

最新推荐文章于 2022-08-23 16:22:00 发布

原创最新推荐文章于 2022-08-23 16:22:00 发布 · 894 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图片

前端框架专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用 HTML 和 JavaScript 实现鼠标悬停时显示图片预览效果的方法。通过为表格单元格添加 onmouseover 和 onmouseout 事件监听器，并结合绝对定位的 div 元素来动态展示图片，提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html中代码

js中代码

function showPic(e, id,obj) {
var u=$(obj).attr('sss');
console.log(u);
var ur=basePath+"/"+u;
     var x, y;
     x = e.clientX;
     y = e.clientY;
     document.getElementById("Layer1").style.left = x + 2 + 'px';
     document.getElementById("Layer1").style.top = y + 2 + 'px';
document.getElementById("Layer1").innerHTML = "<img border='0' width='200px' height='200px' src='"+ur+"'>";
     document.getElementById("Layer1").style.display = "";
}
function hiddenPic() {
document.getElementById("Layer1").innerHTML = "";
document.getElementById("Layer1").style.display = "none";
}