鼠标放小图上显示大图

最新推荐文章于 2018-08-10 17:32:42 发布

Charles0371

最新推荐文章于 2018-08-10 17:32:42 发布

阅读量749

点赞数

分类专栏： Dom

本文链接：https://blog.csdn.net/Charles0391/article/details/24557299

版权

Dom 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

window.onload = function () {
            var datas = {
                "img/1-1.jpg": ["img/1.jpg", "老牛", "163cm"],
                "img/2-1.jpg": ["img/2.jpg", "老马", "165cm"],
                "img/3-1.jpg": ["img/3.jpg", "老蒋", "150cm"]
            };
            var dvObj1 = document.getElementById('dvSmall');

            for (var key in datas) {
                var imSmall = document.createElement('img');
                imSmall.src = key;
                imSmall.setAttribute('imKey', key);
                imSmall.style.marginRight = '10px';
                dvObj1.appendChild(imSmall);

imSmall.onmouseover = function () {
var dvBigObj = document.getElementById('dvBig');

                    dvBigObj.style.position = 'absolute';
                    dvBigObj.style.left = this.offsetLeft + 'px';
                    dvBigObj.style.top = this.offsetTop + this.offsetHeight + 'px';
                    dvBigObj.style.display = 'block';

var arr = datas[this.getAttribute('imKey')];

                    document.getElementById('imBig').src = arr[0];
                    document.getElementById('spName').innerText = arr[1];
                    document.getElementById('spHeight').innerText = arr[2];
                };
            };
        };