jquery鼠标移动图片等比缩放

最新推荐文章于 2021-06-04 08:24:37 发布

随心吗

最新推荐文章于 2021-06-04 08:24:37 发布

阅读量370

点赞数

文章标签： jquery html 图片

<!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="img/025cad11d15789dbe4b98a526a991bf6.jpg" alt="">
<img src="img/0839ca14860678e674b276aa3285c0c1.jpg" alt="">
</div>
<div class="div">
<img src="img/eb9bb9357bb5b977d2a741d93d976b74.jpg" alt="">
<img src="img/46d8066aea36c63d076530c90219de00.jpg" alt="">
</div>
<div class="div">
<img src="img/4c272f3b4468a15c33e009a199544a40.jpg" alt="">
<img src="img/609ec336cfde00906d97e555d7edf810.jpg" alt="">
</div>
<div class="div">
<img src="img/f074715f6291803926b340c54951cd42.jpg" alt="">
<img src="img/a23ddf780361fd5303ff44656a32b319.jpg" alt="">
</div>
</div>

<script src="js/jquery-2.1.4.min.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>

随心吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery鼠标移动图片等比缩放

等比缩放* {padding: 0;margin: 0;}.div {float: left;width: 25%;height: 600px;}img{width: 100%;height: 50%;}$(function ()
复制链接

扫一扫