预览

f0afa87530ecb182d214b69c588c00d4.gif

HTML部分

展示位置

${p.productImg}

创建一个放图片的容器

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

img[src=""],img:not([src]){

opacity:0;

}

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

})

}

原文:https://www.cnblogs.com/yxmhl/p/11622706.html

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐