jQuery鼠标悬停图片由中心点逐渐放大效果

最新推荐文章于 2024-09-23 13:41:34 发布

chongfumang5782

最新推荐文章于 2024-09-23 13:41:34 发布

阅读量295

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2402530/blog/802235

版权

####html代码 <div class="box"> <img src=“xxx.jpg" class="pic" /> </div> ####css代码 *{ margin:0; padding:0; list-style:none;} .box{ width:250px; height:321px; margin:100px auto; position:relative;} img{ position:absolute; left:0; top:0; cursor:pointer;} ####js代码 $(function(){ pic_width = $('.pic').width(); pic_height = $('.pic').height(); pic_width2 = pic_width + 20; pic_height2 = pic_height + 20; $('.pic').hover(function(){ $(this).stop().animate({height:pic_height2,width:pic_width2,left:"-10px",top:"-10px"},500); },function(){ $(this).stop().animate({height:pic_height,width:pic_width,left:"0px",top:"0px"},500); }); });

转载于:https://my.oschina.net/u/2402530/blog/802235