鼠標放小圖上顯示大圖

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];
                };
            };
        };

<div id="dvSmall">
    </div>
    <div id="dvBig" style="background-color: Orange; border: 1px solid green; width: 630px;
        display: none;">
        大頭像:<br />
        <img id="imBig" src="#" alt="Alternate Text" />
        姓名:<span id="spName"></span><br />
        身高:<span id="spHeight"></span>
</div>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章