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>