效果展示:
html部分:
<body>
<div class="container">
<ul>
<li>
<a href="#">
<img src="images/1.jpg" alt="" class="small">
<img src="images/1.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/2.jpg" alt="" class="small">
<img src="images/2.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/3.jpg" alt="" class="small">
<img src="images/3.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/4.jpg" alt="" class="small">
<img src="images/4.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/5.jpg" alt="" class="small">
<img src="images/5.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/6.jpg" alt="" class="small">
<img src="images/6.jpg" alt="" class="big">
</a>
</li>
</ul>
</div>
</body>
css部分:
<style>
* {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
.container {
border-radius: 10px;
width: 490px;
height: 90px;
background-color: #eeeddd;
margin: 0 auto;
padding: 10px;
}
ul {
width: 700px;
}
ul li {
overflow: hidden;
position: relative;
list-style: none;
float: left;
width: 70px;
height: 70px;
margin-right: 10px;
}
ul li .small {
position: absolute;
top: 0;
left: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
ul li .big {
width: 224px;
display: none;
}
</style>
JQuery部分:
<script src="jquery.min.js"></script>
<script>
$(function() {
// 当鼠标移动到ul 里面的li上的时候,// li的兄弟们变成69px,小图片淡入,大图片淡出(类似于排他思想)
$('ul li').mouseenter(function() {
// 当鼠标进入'.container',让他自己宽度变成700px
$('.container').stop().animate({
width: 650
}, 1000);
// 用animate()方法,将当前li的宽度改成224px
$(this).stop().animate({
width: 224
// 让小图片'.small'淡出,大图片'.big'淡入,
}, 1000).find('.small').stop().fadeOut(1000).siblings('.big').stop().fadeIn(1000);
// 同时进行一个排他思想,让li的亲兄弟变为标准状态(类似于排他思想)
$(this).siblings().stop().animate({
width: 69
}, 1000).find('.small').stop().fadeIn(1000).siblings('.big').stop().fadeOut(1000);
// 当鼠标离开.container盒子,所有的li都变成标准状态});
$('.container').mouseleave(function() {
// 离开的时候再让'.container'变回原来大小
$('.container').stop().animate({
width: 490
}, 1000);
$('ul li').stop().animate({
width: 69
}, 1000).find('.small').stop().fadeIn(1000).siblings('.big').stop().fadeOut(1000);
})
})
</script>