代码实现:
<img src="${trexpert.picture}" alt="头像" width="20" height="20" class="apreview" title="证件照"/>
$(function() {
imagePreview();
});
function imagePreview() {
// 图片距离鼠标的位置
this.xOffset = 10;
this.yOffset = -10;
//hover([over,]out)
//over:鼠标移到元素上要触发的函数
//out:鼠标移出元素要触发的函数
//鼠标悬浮的事件
$(".apreview").hover(function (e) {
// this.t = this.title;//显示在图片下的标题
// this.title = ""; //将title置为空,不让文字悬浮提示
this.imgSr = this.src;//图片的连接
// this.c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<div class='preview' style='right:1px;position:absolute;z-index:99;'><img src='" + this.imgSr + "' alt='Image preview' width='300' height='300' /></div>");
$(".preview")
.css("top","10px")
.css("left","10px")
.fadeIn("fast");
},
function () {
// this.title = this.t;//恢复title
$(".preview").remove();
}
);
//鼠标移动的事件,让图片随着移动
$(".apreview").mousemove(function (e) {
$(".preview")
.css("top", "10px")
.css("left","10px");
});
};