<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>
时间: 2024-10-26 22:27:41