簡單實現鼠標懸停顯示圖片

預覽

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");
	})
}