码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2016-01-08 15:52:54      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:

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

  

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

标签:

原文地址:http://www.cnblogs.com/clcloveHuahua/p/5113467.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!