在图片标签中调用方法:onMouseOver="showImage(this)" onMouseOut="hideImage(this)"
在script标签中:
function showImage(a) {
var max = 400;
var img = $("< img width=\"300\" src='" + a.src + "' style='border:1px solid #ccc;'/>");
var imgDiv = $("#sd").append(img);
imgDiv.show();
var width = img.attr("width");
var height = img.attr("height");
if (width >= height && width > max) {
height = height * max / width;
width = max;
} else if (height >= width || height > max) {
width = width * max / height;
height = max;
}
var offset = $(a).offset();
imgDiv.css("left", offset.left + $(a).outerWidth() + 3);
var buttom = $(window).height() + $(document).scrollTop() - max
- offset.top;
if (buttom < 0) {
imgDiv.css("top", offset.top + buttom - 3);
} else {
imgDiv.css("top", offset.top - 3);
}
//imgDiv.css("top", 0);
img.width(width);
img.height(height);
}
function hideImage(a) {
$("#sd").empty().hide();
}
将以下div粘到body中,效果完成:
<div id="sd" style="position: absolute; height: 300px; width: 400px;display: none;"></div>