您当前的位置: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>等比缩放</title>
<style>
* {
padding: 0;
margin: 0;
}
.div {
float: left;
width: 25%;
height: 600px;
}
img{
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<div class="box">
<div class="div">
<img src="222.jpg" alt="">
<img src="222.jpg" alt="">
</div>
<div class="div">
<img src="222.jpg" alt="">
<img src="222.jpg" alt="">
</div>
<div class="div">
<img src="222.jpg" alt="">
<img src="222.jpg" alt="">
</div>
<div class="div">
<img src="222.jpg" alt="">
<img src="222.jpg" alt="">
</div>
</div>
<script src="../jquery-3.1.1.js"></script>
<script>
$(function () {
$('img').mouseover(function(){
$('.div').stop(true);
$('img').stop(true);
$('img').removeClass('da');
$('.div').removeClass('xiao');
$(this).addClass('da');
$(this).parent().addClass('xiao');
$('.div').filter('.xiao').animate({'width':'39%'},1000);
$('.div').not('.xiao').animate({'width':'20%'},1000);
$('img').filter('.da').animate({'height':'400px'},1000);
$('.xiao').find('img').not('.da').animate({'height':'200px'},1000);
$('.div').not('.xiao').find('img').animate({'height':'300px'},1000);
})
$('.box').on('mouseout',function(){
$('img').stop(true);
$('.div').stop(true);
$('.box').find('.div').animate({'width':"25%"});
$('.box').find('img').animate({'height':'300px'});
})
})
</script>
</body>
</html>