本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下
注释：
small img size：600x400 big img size：1200x800原理：
1、大图是小图的 2倍整 2、大图以小图片中心点为中心 a.transform : translate(-50%,-50%) b.(rate-0.5)*50% c.clip : rect(t,r,b,l) 以小图边界为边界 3、rect必须有absolute 4、获取鼠标在图片中的位置 a.获取鼠标位置 XY b.获取图片位置、宽度、高度 i.得到鼠标在图片的百分比位置 ii.将百分比位置应用于大图 left，top问题：
居中理解太差： absolute,left,top,right,bottom,margin 放大缩小问题： 起初： transform： scale() 缩放 利用 transition 过渡 结果，采用这种方法会使得鼠标移动时很卡顿 可能原因：每次hover 都会触发 transition事件 解决方法：采用了 Animate 动画来实现缩放细节：
以 onmouse 事件 e 动态获得 e.pageX 和 e.pageY 以 $().offset().top /left 获取图片位置 以 $().width() /height() 获取图片宽高 在错误的操作中也忘了获取 class 的方法如果要实现 hover出现 透明的块状就在外部 opacity:0.5; 设置z-index就可以了。
<Meta charset="UTF-8">
WEBGOD