手风琴效果（当然你也可以用纯html和css来写，可以去主页看另外方法）
编写网页，设置CSS完成手风琴的结构和样式设置。
为所有图片添加鼠标移入与移出事件。
鼠标移入时，将当前元素的width设为图片的原宽，其他图片的width= (的宽度 - 图片的原宽) / 剩余图片元素个数。
鼠标移出时，所有图片的width=的宽度 / 所有图片的个数。
效果如图所示：
当鼠标移入某一张图片时，此图片展开。
代码如下：
htmlL部分：
<、body>
css部分代码：
JQuery部分代码如下：
用到的知识点：
事件 *** 作 1 常用事件标签中通过属性设置事件，每个属性都由一个on和事件名组成。例如，点击事件对应的属性为onclick。
在jQuery中则可直接使用其提供的与事件类型同名的方法。例如，点击事件对应的方法为click()。
这些事件方法允许重复绑定处理程序，按照绑定顺序依次执行。
若省略参数，则表示触发事件
| 分类 | 方法 | 说明 |
|---|---|---|
| 表单事件 | blur([[data],function]) | 当元素失去焦点时触发 |
| 表单事件 | focus([[data],function]) | 当元素获得焦点时触发 |
| 表单事件 | change([[data],function]) | 当元素的值发生改变时触发 |
| 表单事件 | focusin([data],function) | 在父元素上检测子元素获取焦点的情况 |
| 表单事件 | focusout([data],function) | 在父元素上检测子元素失去焦点的情况 |
| 表单事件 | select([[data],function]) | 当文本框（包括 |