Question

我有一个函数，onmouseover加载一个javascript函数

function imgEnlarge(val) {
    var imageFile = getVal(arrayFile, {
        'id': val
    }, 'picture');
    var imagePath = 'admin/img/' + imageFile;
    document.getElementById("imgDisplay").innerHTML = '<img src="' + imagePath + '" style="width:800px;height600px">';
} //end enlarge function


.imgDisplay {
    top: 50;
    left: 200;
    position: absolute;
    z - index: 999;
    width: 600 px;
    height: 500 px;
}

问题是当我向下滚动到例如页面中间时，显示仍然在页面的顶部＆＃34;因为我可以看到图像底部出现在div上。

我的网站顶部有一个空div，其id为imgDisplay

如何修复代码，使onmouseover，图片显示将在当前屏幕X，Y而不是顶部：和左:(从页面顶部）

Answer 1

您只需将图像的位置设置为固定，将顶部和左侧属性设置为0。

这是一个javascript解决方案：

 var image = document.getElementById('imgDisplay');

    image.addEventListener('mouseover', function(){
        this.style.position = "fixed";
        this.style.top = 0;
        this.style.left = 0;
    });

使用OnMouseOver函数在页面中定位图像

1 个答案: