一列图片，鼠标点击放大，其他图片等比缩小

<!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>

posted @ 2017-04-14 17:42  神瞎  阅读(386)  评论(0)    收藏  举报