利用动画做出手风琴的效果，主要用到的是mouseenter mouseleave animate
我们先看一下css样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } li { list-style: none; } .image-box li { width: 240px; overflow: hidden; float: left; } .image-box li img { width: 800px; } </style> </head> <body> <div class="box"> <ul class="image-box"> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul> </div> </body> </html>
接下来是js代码
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// $(item)
// jquery -----> DOM
// $(item).get(0)
$('.image-box .item').each(function(index, item) {// jquery 循环each()，里面传入一个函数，两个参数，一个是索引，元素本身（DOM）
$(item).append("<img src='images/banner"+ (index + 1) +".jpg' />")
// DOM ---> jquery
})
//当鼠标指针穿过元素时，会发生 mouseenter 事件
$(".item").on("mouseenter", function() {
$(".item").stop();
//自定义动画，设置鼠标在移入时让图片放大的宽度，同时利用sibling()找到除了它以外的其他同辈元素，使其宽度变小
$(this).animate({ 800}, 1000).siblings().animate({ 100}, 1000)
}).on("mouseleave", function() {
$(".item").stop();
//当鼠标指针离开元素时，会发生 mouseleave 事件，图片大小全部回归原位
$(".item").animate({ 240}, 1000);
})
</script>