(前端页面)如何点击(指到)小图,弹出大图
实现效果
思路:在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 onclick=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); }