//鼠标悬浮放大图片 图片class:.viewer
function imagePreview() {
// 图片距离鼠标的位置
this.xOffset = 10;
this.yOffset = -10;
var vwidth=document.body.offsetWidth;
var vheight=document.body.offsetHeight;
var pwidth=400;//预览宽度px
var pheight=300;//预览高度px
//hover([over,]out)
//over:鼠标移到元素上要触发的函数
//out:鼠标移出元素要触发的函数
//鼠标悬浮的事件
$(".viewer").hover(function (e) {
// this.t = this.title;//显示在图片下的标题
// this.title = ""; //将title置为空,不让文字悬浮提示
this.imgSr = this.src;//图片的连接
// this.c = (this.t != "") ? "
" + this.t : "";
$("body").append("");
$(".preview")
.css("top","10px")
.css("left","10px")
.fadeIn("fast");
},
function () {
// this.title = this.t;//恢复title
$(".preview").remove();
}
);
//鼠标移动的事件,让图片随着移动
$(".viewer").mousemove(function (e) {
/*
$(".preview")
.css("top", "10px")
.css("left","10px");
*/
//预览跟随鼠标移动
if((e.pageX+pwidth)>vwidth||(pheight+e.pageY)>vheight){
$(".preview").css({
"top":(e.pageY-10-pheight)+"px",
"left":(e.pageX-20-pwidth+pwidth/2)+"px"
}).fadeIn("fast");
}else{
$(".preview").css({
"top":(e.pageY+10)+"px",
"left":(e.pageX+20-pwidth/2)+"px"
}).fadeIn("fast");
}
});
$('.viewer').viewer({
//放大图片
navbar:false,//关闭缩略导航
toolbar:false//关闭工具栏
});
};
| 留言与评论(共有 0 条评论) “” |