热门关键字:
jquery > jquery插件 > jquery图片放大 > 网友洛克哈特jquery实现鼠标悬浮图片放大特效

网友洛克哈特jquery实现鼠标悬浮图片放大特效

11824
所属分类:jquery图片放大
发布时间:2013/12/4 20:04:04
下载量:1367
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Detail.aspx?id=384

首先非常感谢网友洛克哈特的无私分享,这是他分享到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});});
}

效果如下:

网友洛克哈特jquery实现鼠标悬浮图片放大特效





如果您觉得本作品对您的学习有所帮助:支付鼓励



关键字:网友洛克哈特 图片放大 鼠标特效 悬停特效 鼠标悬浮 放大镜
  • 网友洛克哈特jquery实现鼠标悬浮图片放大特效如果你喜欢学院的资源就下载吧,亲,谢谢!
  • 网友洛克哈特jquery实现鼠标悬浮图片放大特效
  • 网友洛克哈特jquery实现鼠标悬浮图片放大特效
  • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网,版权归作品最初创作人,转载请注明(出处)原文链接,转载前请邮件至磐temdy@qq.com,一旦发现造成侵权行为,后果自负。。

友荐云推荐