JS实现鼠标移上图片显示、大图显示

最新推荐文章于 2023-12-18 09:37:35 发布

hcb0825

最新推荐文章于 2023-12-18 09:37:35 发布

阅读量2.4k

点赞数

分类专栏： JavaScript|Jquery 文章标签： layer function javascript html div

本文链接：https://blog.csdn.net/hcb0825/article/details/5768742

版权

JavaScript|Jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

function showPic(sUrl){
var x,y;
x = event.clientX;
y = event.clientY;
document.getElementById("Layer1").style.left = x;
document.getElementById("Layer1").style.top = y;
document.getElementById("Layer1").innerHTML = "<img src="/" mce_src="/""" + sUrl + "/">";
document.getElementById("Layer1").style.display = "block";
}

这个函数用来处理"onmousemove"事件，即鼠标在原图上移动产生的事件。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS函数实现鼠标指向后带图片的提示效果</title> <mce:script language="javascript"></mce:script> </head> <body> <div id="Layer1" style="display:none;position:absolute;z-index:1;" mce_style="display:none;position:absolute;z-index:1;"></div> <img src="hlg.jpg" mce_src="hlg.jpg" onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);" width="300" height="300"/> </body> </html>

hcb0825

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS实现鼠标移上图片显示、大图显示

<br /> function showPic(sUrl){ <br />var x,y; <br />x = event.clientX; <br />y = event.clientY; <br />document.getElementById("Layer1").style.left = x; <br />document.getElementById("Layer1").style.top = y; <br />document.getElementById("Layer1").innerHTML
复制链接

扫一扫

专栏目录