jquery 鼠标悬浮放大图片 图片class:viewer

//鼠标悬浮放大图片 图片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("Image preview");

$(".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//关闭工具栏

});

};

jquery 鼠标悬浮放大图片 图片class:viewer

jquery 鼠标悬浮放大图片 图片class:viewer

jquery 鼠标悬浮放大图片 图片class:viewer

发表评论
留言与评论(共有 0 条评论) “”
   
验证码:

相关文章

推荐文章