一列图片，鼠标点击放大，其他图片等比缩小
<!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>