参考:Layui 数据表格显示图片,鼠标滑过图片放大
HTML img 刷新图片的问题
layer Tips的简单使用及图片显示
table.render({
elem: "#table_list",
url: "/table",
cols: [
[
{ checkbox: true, fixed: true },
{ field: "id", title: "ID", align: "center", sort: true, 50 },
{ field: "image", title: "图片"},
]
],
id: "listReload",
page: true,
height: "full-130",
done:function(res,curr,count){
console.log("*****")
hoverOpenImg();//hover显示大图
$('table tr').on('click',function(){
console.log("*****")
$('table tr').css('background','');
$(this).css('background','<%=PropKit.use("config.properties").get("table_color")%>');
});
}
});
function hoverOpenImg(){
var img_show = null; // tips提示
var kd,kd1
$('tbody tr').hover(function(){
// console.log($(this)[0].childNodes[5].innerText)
kd=$(this).width();
kd1=kd*0.2; //图片放大倍数
var img = "<img class='img_msg' src='"+$(this)[0].childNodes[5].innerText+"?t"+Math.random()+"' style='"+kd1+"px;' />";
img_show = layer.tips(img,".input-cont",{time:0, tips: [3, '#ffffff']});
console.log(img)
},function(){
layer.close(img_show);
});
$('td img').attr('style','max-50px;display:block!important');
}