AspNet技术

.Net平台 + C#语言 + Microsoft SQL Server 开发互联网之web应用!

[原]鼠标放小图上显示大图

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>

posted on 2014-04-26 22:15  Seves2015  阅读(189)  评论(0编辑  收藏  举报

导航