简单实现鼠标悬停显示图片

Posted 2022-12-22 yxmhl

预览

html部分

展示位置

<c:forEach items="$pageInfo.list" var="p">
    <td class="imgShow$p.id" onmouseover="on('$p.productImg')" onmouseout="off()">$p.productImg</td>

创建一个放图片的容器

<img id="s" src="" style="width: 300px; height: 300px;">

去掉当图片没有路径时默认的边框

<style>
    img[src=""],img:not([src])
        opacity:0;
    
</style>

javascript部分

/**
 * 显示图片详情，鼠标移入时执行
 */
function on(productImg) 
    if (productImg == "undefined" || productImg == null || productImg == "") 
        return;
    
    //给图片容器赋值路径
    $("#s").attr("src", "$pageContext.request.contextPath/static/images/upload/" + productImg);
    $(document).mousemove(function(e) 
        $("#s").css("position", "absolute").css("left", e.pageX+1+"px").css("top", e.pageY+1+"px");
    )


/**
 * 关闭图片，当鼠标移出时执行
 */
function off() 
    $("#s").attr("src", "");
    $(document).mousemove(function(e) 
        $("#s").css("position", "absolute").css("left", "-400px").css("top", "-400px");
    )