动态加载图片，并且实现小图呈现大图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
function LoadImg() {
for (var smallPath in data) {
var imgPath = document.createElement("img");
imgPath.src = smallPath; key值存为小图地址
imgPath.setAttribute("a1", data[smallPath][0]);
imgPath.setAttribute("a2", data[smallPath][1]);
imgPath.setAttribute("a3", data[smallPath][2]);
imgPath.onmouseover = function() {
document.getElementById("imgBig").src = this.getAttribute("a1");
document.getElementById("pHeight").innerHTML = this.getAttribute("a3");
document.getElementById("pWeight").innerHTML = this.getAttribute("a2");
document.getElementById("divDetail").style.display = '';
document.getElementById("divDetail").style.top = window.event.clientY;
document.getElementById("divDetail").style.left = window.event.clientX;
}
document.body.appendChild(imgPath);
}
}
function detailHide() {
var divDetail = document.getElementById("divDetail");
divDetail.style.display = 'none';
}
</script>
</head>
<body onload="LoadImg()">
<div style="postion: absolute; display: none" id="divDetail">
<img id="imgBig" src="" />
<p id="pHeight">
</p>
<p id="pWeight">
</p>
<input type="button" onclick="detailHide()" value="关闭" style="width: 41px" />
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//用字典存储数据
var data = { "Images/small.jpg": ["Images/big.jpg", "布莱尼", "172"], "Images/small1.jpg": ["Images/big1.jpg", "布刮刮", "192"], "Images/small2.jpg": ["Images/big2.jpg", "妞妞", "182"] };function LoadImg() {
for (var smallPath in data) {
var imgPath = document.createElement("img");
imgPath.src = smallPath; key值存为小图地址
imgPath.setAttribute("a1", data[smallPath][0]);
imgPath.setAttribute("a2", data[smallPath][1]);
imgPath.setAttribute("a3", data[smallPath][2]);
imgPath.onmouseover = function() {
document.getElementById("imgBig").src = this.getAttribute("a1");
document.getElementById("pHeight").innerHTML = this.getAttribute("a3");
document.getElementById("pWeight").innerHTML = this.getAttribute("a2");
document.getElementById("divDetail").style.display = '';
document.getElementById("divDetail").style.top = window.event.clientY;
document.getElementById("divDetail").style.left = window.event.clientX;
}
document.body.appendChild(imgPath);
}
}
function detailHide() {
var divDetail = document.getElementById("divDetail");
divDetail.style.display = 'none';
}
</script>
</head>
<body onload="LoadImg()">
<div style="postion: absolute; display: none" id="divDetail">
<img id="imgBig" src="" />
<p id="pHeight">
</p>
<p id="pWeight">
</p>
<input type="button" onclick="detailHide()" value="关闭" style="width: 41px" />
</div>
</body>
</html>
