两种方式实现鼠标悬停图片逐渐变大

Posted 2020-09-03

鼠标悬停图片逐渐变大这是一个很常见的效果，这里推荐两种方式，各有优缺点：

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);
});

两种比较起来，第二种会导致当鼠标过一次就会变大缩小一次，会造成次数过多，与实际演示的不匹配，建议用第一种，第一种也还可以改进。