<script type="text/javascript">
var datas = {
"mv/1-1.jpg": ["mv/1.jpg", "老牛", "163cm"],
"mv/2-1.jpg": ["mv/2.jpg", "老马", "165cm"],
"mv/3-1.jpg": ["mv/3.jpg", "老蒋", "150cm"]
};
onload = function () {
//遍历集合中的每个元素
for (var item in datas) {
//创建图片标签
var imgObj = document.createElement('img');
imgObj.src = item;
//创建一个自定义的属性来存储item的键
imgObj.setAttribute('key', item);
imgObj.style.marginLeft = '10px';
imgObj.style.cursor = 'pointer';
//将图片标签放入divSamll中
document.getElementById('divSmall').appendChild(imgObj);
//给每张图片注册一个鼠标进入的事件
imgObj.onmouseenter = function () {
var dvBigObj = document.getElementById('divBig');
//设置div的属性和位置
dvBigObj.style.display = 'block';
dvBigObj.style.position = 'absolute';
dvBigObj.style.left = this.offsetLeft + 'px';
dvBigObj.style.top = this.offsetTop + this.offsetHeight + 'px';
document.getElementById('imgBig').src = datas[this.getAttribute('key')][0];
if (typeof (document.getElementById('spName')) == 'string') {
//IE
//document.getElementById('spName').innerText = datas[this.getAttribute('key')][1];
//document.getElementById('spHeight').innerText = datas[this.getAttribute('key')][2];
document.getElementById('spName').innerText = datas[item][1];
document.getElementById('spHeight').innerText = datas[item][2];
} else {
//火狐
document.getElementById('spName').textContent = datas[this.getAttribute('key')][1];
document.getElementById('spHeight').textContent = datas[this.getAttribute('key')][2];
}
};
imgObj.onmouseleave = function () {
document.getElementById('divBig').style.display = 'none';
};
};
};
</script>