王者荣耀手风琴案例

同学们，咱们今天的作业是利用鼠标移动事件，以及jQuery动画效果来写一个王者荣耀手风琴案例

 我们要完成这个效果总共有三步：

第一步：写div布局

•  写一个div标签，里面写无序列表
• 一个li标签里面要有两张图片
• 给div标签，第一个li里面设id

<div id="body">
			<ul>
				<li id="content">
					<img src="img/c.png"  class="big"/>
					<img src="img/c1.jpg" class="small" />
				</li>
				<li>
					<img src="img/h.png"  class="big"/>
					<img src="img/h1.jpg" class="small" />
				</li>
				<li>
					<img src="img/l.png"  class="big"/>
					<img src="img/l1.jpg" class="small" />
				</li>
				<li>
					<img src="img/m.png"  class="big"/>
					<img src="img/m1.jpg" class="small" />
				</li>
				<li>
					<img src="img/t.png"  class="big"/>
					<img src="img/t1.jpg" class="small" />
				</li>
				<li>
					<img src="img/w.png"  class="big"/>
					<img src="img/w1.jpg" class="small" />
				</li>
				<li>
					<img src="img/z.png"  class="big"/>
					<img src="img/z1.jpg" class="small" />
				</li>
			</ul>
		</div>

第二步：写css样式

<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#body{
				width: 750px;
				height: 70px;
				background: url(img/bg.png);
				padding: 10px;
				margin: 10px auto;
			}
			#body ul li{
				width: 69px;
				height: 69px;
				float: left;
				overflow: hidden;
				margin-left: 10px;
				border-radius: 5px;/* 设置边框圆角弧度 */
			}
			#body ul #content{
				width: 224px;
			}
			#content .big{
				display: block;
			}
			#content .small{
				display: none;
			}
			.small{
				width: 69px;
				height: 69px;
				position: relative;
			}
			.big{
				display: none;
				position: relative;
			}
		</style>

第三步：写Jquery代码

• 首先导入js类库
• 然后通过停止动画（stop），自定义动画（animate）鼠标移动事件（mouseover）等来实现这个动画

<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
				$(function(){
					$("#body ul li").mouseover(function(){
						//鼠标放入li，让当前的li变宽，找到li里面的class里面big的元素设置显示
						//再让该big元素的其他兄弟元素变窄
						$(this).stop().animate({
							width:224,
						}).find(".big").stop().fadeIn().siblings().stop().hide();
						//鼠标放入li，让当前的li变宽，找到li里面的class里面big的元素设置显示
						//再让该big元素的其他兄弟元素变窄
						$(this).siblings().stop().animate({
							width:69,
						}).find(".big").stop().hide().siblings().stop().fadeIn();
					});
				});
		</script>

最后我们来看一下效果