首先非常感谢网友洛克哈特的无私分享,这是他分享到JquerySchool网站上的第三款作品,实现了jquery实现鼠标悬浮图片放大特效,有网友在jquery学堂群里要这种特效,网站上也有类似的效果,但整体来讲代码多,复杂,于是他就亲手写了一个简洁的demo分享给大家,写好第一时间分享出来,网友们好好利用哦,超实用。。。
jquery功能代码如下:
$(function(){
var imgWid = 0 ;
var imgHei = 0 ; //变量初始化
var big = 1.2;//放大倍数
$(".banimg li").hover(function(){
$(this).find("img").stop(true,true);
var imgWid2 = 0;var imgHei2 = 0;//局部变量
imgWid = $(this).find("img").width();
imgHei = $(this).find("img").height();
imgWid2 = imgWid * big;
imgHei2 = imgHei * big;
$(this).find("img").css({"z-index":2});
$(this).find("img").animate({"width":imgWid2,"height":imgHei2,"margin-left":-imgWid2/2,"margin-top":-imgHei2/2});
},function(){$(this).find("img").stop().animate({"width":imgWid,"height":imgHei,"margin-left":-imgWid/2,"margin-top":-imgHei/2,"z-index":1});});
}
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
网友洛克哈特 图片放大 鼠标特效 悬停特效 鼠标悬浮 放大镜