17JavaScriptDOM动态获取键值对集合中的数据====小图与大图之间的显示问题

 <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>

  

posted on 2016-01-08 15:45  努力的活着_在人间  阅读(215)  评论(0)    收藏  举报

导航