拓展12-easyUI datagrid列表图片展示小图，鼠标悬停放大预览

1、效果图

• datagrid列表内展示的为小图，悬停展示的为高清大图
• onmouseover悬停事件
• onmouseout移走事件

2、jsp页面

<th data-options="field:'smallPic',width:20,formatter:smallpicFormt">图片</th>

3、js格式化图片展示

οnmοuseοver='bigImg(this)
οnmοuseοut='closeImg()

//smallpic格式化
function smallpicFormt(v, r, i) {
    return "+ v + " οnmοuseοver='bigImg(this)' οnmοuseοut='closeImg()' style=" + "'width: 50px;height: 50px'" + ">";
}

4、onmouseover事件

//鼠标放上去
function bigImg(imgObj) {
    var picdialog = $("#picdialog");
    var imgid = $("#img_id");
    if ((imgObj == undefined || imgObj == null || imgObj.length == 0)
        || ($(imgObj).attr("src") == "")) {
        $.messager.alert('提示', "该图片无法打开！");
        return;
    }
    var img = new Image();
    img.src = $(imgObj).attr("src");
    var smallsrc = $(imgObj).attr("src");
    //小图路径换成大图路径
    var picsrc = smallsrc.replace(/_small/, "");
    img.src = picsrc;
    var imgWidth = "";
    var imgHeight = "";
    var imgProportion = "";
    // 显示宽度
    if (imgWidth != null && imgWidth != "") {
        img.width = imgWidth;
    }
    // 显示高度
    if (imgHeight != null && imgHeight != "") {
        img.height = imgHeight;
    }
    // 显示比例设置
    if (imgProportion != null && imgProportion != "") {
        img.width = img.width * parseFloat(imgProportion) / 100;
        img.height = img.height * parseFloat(imgProportion) / 100;
    }
    // 保持图片纵横比的情况下，取得能够在$(window)中放得下的大小
    var heightWidthPropor = img.height / img.width;
    var width = $(window).width() * 0.8 >= img.width ? img.width : $(window).width() * 0.8;
    var height;
    if ($(window).height() * 0.8 < width * heightWidthPropor) {
        height = $(window).height() * 0.8;
        width = height / heightWidthPropor;
    } else {
        height = width * heightWidthPropor;
    }
    imgid.css("height", height + "px");
    imgid.css("max-height", height + "px");
    if (imgWidth != null && imgWidth != "") {
        imgid.css("width", width + "px");
        imgid.css("max-width", width + "px");
    }

    picdialog.css("width", width + "px");
    picdialog.css("height", height + 5 + "px");

    imgid.css("overflow", "hidden");

    //设置图片路径
    imgid.attr('src', img.src);
    picdialog.window('center');
    // 解决关闭按钮位置问题
    $("div.panel-header.panel-header-noborder.window-header").css("width", "auto");
    picdialog.dialog("open");
}

5、onmouseover事件

//鼠标移走
function closeImg(imgObj) {
    $("#picdialog").dialog("close");
}