需求是这样的，页面中的图片不能显示原图大小，那样布局会乱掉，所以需要显示小图，然后当鼠标经过的时候显示大图即可。
<div id="Photo" style="overflow:hidden;text-align:center;padding:10px"> </div> <div id="enlarge_images"></div>
页面代码就是这个就够了，当然了，由于我的图片是后台请求后加载进来的，所以图片暂时是空的。
var Photo = document.getElementById("Photo"); var gg = Photo.getElementsByTagName("img"); var ei = document.getElementById("enlarge_images"); for (i = 0; i < gg.length; i++) { var ts = gg[i]; ts.onmousemove = function (event) { event = event || window.event; ei.style.display = "block"; ei.innerHTML = '<img src="' + this.src + '" />'; ei.style.top = 60 + "px"; ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px"; } ts.onmouseout = function () { ei.innerHTML = ""; ei.style.display = "none"; } ts.onclick = function () { window.open(this.src); } }
这个比较简单，就是在鼠标经过img标签的时候，打开显示大图的弹窗而已。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#demo {
overflow: hidden;
120px;
text-align: center;
padding: 10px;
}
#demo img {
border: none;
100px;
height: 100px;
border: 5px solid #f4f4f4
}
#enlarge_images {
position: absolute;
display: none;
z-index: 2;
border: 5px solid #f4f4f4
}
</style>
</head>
<body>
<div id="demo" style="overflow:hidden;120px;text-align:center;padding:10px">
<img src="aaa.jpg"><img src="aaa.jpg"><img src="aaa.jpg">
</div>
<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for (i = 0; i < gg.length; i++) {
var ts = gg[i];
ts.onmousemove = function(event) {
event = event || window.event;
ei.style.display = "block";
ei.innerHTML = '<img src="' + this.src + '" />';
ei.style.top = document.body.scrollTop + event.clientY + 10 + "px";
ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
}
ts.onmouseout = function() {
ei.innerHTML = "";
ei.style.display = "none";
}
ts.onclick = function() {
window.open(this.src);
}
}
</script>
</body>
</html>