使用鼠标悬停功能在页面中定位图像

Positioning image in the page with OnMouseOver function

本文关键字：定位 图像 鼠标 悬停 功能      更新时间：2023-09-26

我有一个函数，可以在鼠标上加载一个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;
}

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

我网站的顶部有一个空的div，它的ID为imgDisplay。

如何修复代码，以便在鼠标悬停时，图片显示将在当前屏幕 X，Y 而不是顶部：和左侧：（从页面顶部）

您可以简单地将图像的位置设置为固定，并将顶部和左侧属性设置为 0。

这是一个JavaScript解决方案：

 var image = document.getElementById('imgDisplay');
    image.addEventListener('mouseover', function(){
        this.style.position = "fixed";
        this.style.top = 0;
        this.style.left = 0;
    });
相关文章：