js 鼠标放置图片展示大图并跟随鼠标移动

来源：互联网发布：安卓源码在线生成apk 编辑：程序博客网时间：2024/05/16 17:06

js 鼠标放置图片展示大图并跟随鼠标移动

html 页面中，鼠标放置图片上方，显示大图并跟随鼠标移动，当鼠标移出图片内容时，大图消失
源码内容如下：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js 鼠标放到图片上显示大图并跟随鼠标移动</title><script type="text/javascript">//展示function showBigPic(filepath) {    //将文件路径传给img大图    document.getElementById('pre_view').src = filepath;    //获取大图div是否存在    var div = document.getElementById("bigPic");    if (!div) {        return;    }    //如果存在则展示    document.getElementById("bigPic").style.display="block";    //获取鼠标坐标    var intX = window.event.clientX;    var intY = window.event.clientY;    //设置大图左上角起点位置    div.style.left = intX +10+ "px";    div.style.top = intY + 10+"px";}//隐藏function closeimg(){    document.getElementById("bigPic").style.display="none";}</script></head><body><div id="sta"><img src="D:\JPG\00000000000000.jpg" width="300px" onmousemove="showBigPic(this.src)" onmouseout="closeimg()"/><br /><img src="D:\JPG\2.jpg" width="300px" onmousemove="showBigPic(this.src)" onmouseout="closeimg()"/><br /><img src="D:\JPG\10.jpg" width="300px" onmousemove="showBigPic(this.src)" onmouseout="closeimg()"/><br /></div><div id="bigPic" style="position:absolute;display:none;"><img src="" width="600px" id="pre_view"/><br /></div></body></html>

1 0