首页 > 代码库 > 两种方式实现鼠标悬停图片逐渐变大
两种方式实现鼠标悬停图片逐渐变大
鼠标悬停图片逐渐变大这是一个很常见的效果,这里推荐两种方式,各有优缺点:
1.利用js,通过定时器实现宽高的加减。
//鼠标移动图片变大 function change_large(obj,speed,target_width,target_height){ var timer = null; var bengin_width = 140;//初始宽度 var bengin_height = 180;//初始高度 clearInterval(timer); timer = setInterval(function(){ if(bengin_width == target_width && bengin_height == target_height){ clearInterval(timer); } else{ //alert(obj); bengin_width += speed; bengin_height += speed; obj.css("width",bengin_width); obj.css("height",bengin_height); } }, 1); } //鼠标移动图片变小 function change_small(obj,speed,target_width,target_height){ var timer = null; var bengin_width = 160; var bengin_height = 200; clearInterval(timer); timer = setInterval(function(){ if(bengin_width == target_width && bengin_height == target_height){ clearInterval(timer); } else{ //alert(obj); bengin_width += speed; bengin_height += speed; obj.css("width",bengin_width); obj.css("height",bengin_height); } }, 1); } $(".div_item").mouseenter(function(){ var obj = $(this).children("img"); change_large(obj,1,160,200); }); $(".div_item").mouseleave(function(){ var obj = $(this).children("img"); change_small(obj,-1,140,180); });
2.第二种比较简答,直接上jquery的animate()
$(".div_item").mouseenter(function(){ $(this).children("img").animate({ height:‘+=20px‘, width:‘+=20px‘ },100); }); $(".div_item").mouseleave(function(){ $(this).children("img").animate({ height:‘-=20px‘, width:‘-=20px‘ },100); });
两种比较起来,第二种会导致当鼠标过一次就会变大缩小一次,会造成次数过多,与实际演示的不匹配,建议用第一种,第一种也还可以改进。
两种方式实现鼠标悬停图片逐渐变大
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。