$("th.detail").hover(function (event) {
var mx = event.offsetX;
var my = event.offsetY;
var x = mx + 5;
var y = my + 5;
$(this).children("div").css({
position: "absolute",
"z-index": "99",
left: x,
top: y
});
$(this).children("div").show();
}, function () {
$(this).children("div").hide();
});
})
View larger image
/**'
* 浏览大图
* @param obj
*/
var previewImg = function (obj) {
var src = $(obj).attr("src");
var width = 600;
var height = 600;
var img = new Image();
var imgHtml = "<img src='" + src + "' width='" + width + "'+ height='" + height + " '/>";
//弹出层
layer.open({
type: 1,
shade: 0.8,
offset: 'auto',
area: [width + 'px', height + 'px'],
shadeClose: true,
scrollbar: false,
title: "图片预览", //不显示标题
content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
cancel: function () {
//layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });
}
});
}
//调用方法
<a href='javascript:;' onclick='previewImg(this)' src='" + url + d.savename + "' >[文件名称]</a>
// View picture
/**'
* 浏览大图
* @param obj
*/
function previewImg(obj) {
var src = $(obj).attr("src");
if(src==null || src==""){
layer.msg("没有发现图片!");
return ;
}
var default_config = {title: "图片预览"};
var img = new Image();
img.onload = function() {//避免图片还未加载完成无法获取到图片的大小。
//避免图片太大,导致弹出展示超出了网页显示访问,所以图片大于浏览器时下窗口可视区域时,进行等比例缩小。
var max_height = $(window).height() - 100;
var max_width = $(window).width();
//rate1,rate2,rate3 三个比例中取最小的。
var rate1 = max_height/img.height;
var rate2 = max_width/img.width;
var rate3 = 1;
var rate = Math.min(rate1,rate2,rate3);
//等比例缩放
default_config.height = img.height * rate; //获取图片高度
default_config.width = img.width * rate; //获取图片宽度
default_config.width-=50
default_config.src = src;
$.extend( default_config, obj);
var imgHtml = "<img src='" + default_config.src + "' width='"+default_config.width +"px' height='"+default_config.height+"px'/>";
//弹出层
layer.open({
type: 1,
shade: 0.
area: [default_config.width + 'px',default_config.height +'px'], ////宽,高
shadeClose:true,
scrollbar: false,
title: default_config.title, //不显示标题
content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
cancel: function () {
//layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });
}
});
}
img.src = src;
}