关于css:如何实现鼠标悬停图片放大的效果

38次阅读

共计 626 个字符，预计需要花费 2 分钟才能阅读完成。

两种形式：

<style>
.a1{width:137px;height:138px;border:1px solid red;overflow:hidden;position:relative;}
.pic{position:absolute;}
</style>

<div class="a1">
    <img src="1.jpg" width="137" height="138" class="pic" />
</div>

1.css 实现鼠标悬浮图片放大

img {
    width: 100%;
    /* height: auto; */
    transform: scale(1);
    transition: transform 1s ease 0s;
}

img:hover {transform: scale(1.05);
}

2.js 实现鼠标悬浮图片放大

<script> 
    $(function(){$w = $('.pic').width();
        $h = $('.pic').height();
        $w2 = $w + 20;
        $h2 = $h + 20;

        $('.pic').hover(function(){$(this).stop().animate({height:$h2,width:$w2,left:"-10px",top:"-10px"},500);
        },function(){$(this).stop().animate({height:$h,width:$w,left:"0px",top:"0px"},500);
        });
    }); 
</script>

正文完