（前端页面）如何点击(指到)小图，弹出大图

实现效果

思路:在img标签中加入鼠标事件

具体代码(以easyui为例)：

//显示图片
function imgFormatter(value, row, index) {
    if ('' != value && null != value) {
        var strs = new Array(); //定义一数组
        if (value.substr(value.length - 1, 1) == ",") {
            value = value.substr(0, value.length - 1)
        }
        strs = value.split(","); //字符分割
        var rvalue = "";
        for (i = 0; i < strs.length; i++) {
            rvalue += "<img οnclick=download(\"" + strs[i] + "\") style='width:50px; height:50px;margin-left:3px;' src='" + strs[i] + "' title='点击查看图片'/>";
        }
        return rvalue;
    }
}

//打开大图
function download(img) {
    var imgstr = img;
    var index = imgstr.indexOf('_s');
    var beforeIndex = index;
    var lastIndex = index + 6;
    var before = imgstr.substring(0, beforeIndex);
    var endIndex = imgstr.length;
    var last = imgstr.substring(lastIndex, endIndex);
    var resultImg = before + last;
    var simg = resultImg;
    $('#dlg').dialog({
        title: '预览',
        width: 600,
        height: 400,
        resizable: true,
        closed: false,
        cache: false,
        modal: true
    });
    $("#simg").attr("src", simg);
}

 

转载于:https://www.cnblogs.com/kingofjava/p/10611631.html