js代码过程解释
<script src="./jquery.min.js"></script>
<script>
// 手风琴效果
// 每个li中,图片默认只显示一部分
// 当鼠标进过时,经过哪个图片,哪个图片就完全显示,其他图片就显示更小的一部分
// 显示的图片,宽度变为520,其他图片宽度变为40
$('ul>li').mouseover(function(){
// 让当前li的宽度变为520
// 让兄弟li的宽度变为60
$(this).stop().animate({width:520,} , 1000).siblings().finish().animate({width:60} , 1000);
})
$('ul').mouseout(function(){
// 让所有li的宽度,变为默认的 180
$('ul>li').stop().animate( {width : 180} , 1000 );
})
// 总结:
// 鼠标移入 li 标签
// 让 当前的li 标签 宽度变大 , 其他兄弟li标签,宽度变小
// 鼠标移出 整个ul
// 让 所有的 li标签, 宽度恢复原状
</script>