图片中心放大原理

九宫格图片布局也是一些常见的布局，点击图片的时候图片会放大原来的倍数。
图片放大主要的两点就是：
**1.**将css的float定位，转换成用js的绝对定位
**2.**从中心放大缩小物体

实现的步骤
1.先通过css的float定位，ul宽度设置成li宽的倍数（例子中li的宽是122，没行显示3 个li，所以ul宽设置成366）。使其9张图片在一个div下显示出来。
2.然后利用循环获取到每个li的left top 值。让每个li都有自己的值。

3.ul 的position：relative相对定位，接着用循环设置li的position：absolute绝对定位
4.创建img标签。然后设置img的src属性。最后将img添加到li便签里面。
5.添加鼠标移入移出事件，当鼠标移动到该图片让该图片的宽和高放大原来的两倍。移出的时候恢复原来的大小。放大的时候需要注意marginleft 和margintop值 减去该图片一半 否则图片会发生偏移。没办法实现中心放大。
6.还要注意图片放大时候的层级问题 设置 zIndex 值 让每次放大的图片的层级最大。移出的时候恢复。
下面是一些简单的代码。

以上是九宫格布局图片放大的一些基本原理。