1.效果图
2.创建显示框
<style> img[src=""],img:not([src]){ opacity:0; } </style> <body> <!---创建悬浮框--> <img id="s" src="" style="width: 300px; height: 300px;"> </body>
3.js代码
<script type="text/javascript">
function formatImg(val, row) {
var img1=row.couponImage;//联网获取图片路径
if (row.couponImage !== "" ){
return "<img style=‘width:60px; height:50px;margin-left:3px;‘ onmouseover=\"on(\‘" + img1 + "\‘)\" onmouseout=\"off()\" src=‘images/"+row.couponImage+"‘/>";
// return "优惠券预览" ;
}
}
function formatErImg(val, row) {
var img2=row.couponErImg;
if (row.couponErImg !== ""){
return "<img style=‘width:60px; height:50px;margin-left:3px;‘ onmouseover=\"on(\‘" + img2 + "\‘)\" onmouseout=\"off()\" src=‘images/"+row.couponErImg+"‘/>";
// return "优惠券预览" ;
}
}
// function showImg(imgUrl) {
// console.log(imgUrl);
// }
/**
* 显示图片详情，鼠标移入时执行
*/
function on(productImg) {
if (productImg == "undefined" || productImg == null || productImg == "") {
return;
}
//给图片容器赋值路径
$("#s").attr("src",‘images/‘+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");
})
}
</script>
原文：https://www.cnblogs.com/fanfusuzi/p/14543665.html