仿QQ个人中心图片展示效果

网络中的相册应用经常会遇到这种情况:用户上传的图片经过服务器等比缩小后,前端把图片放在固定大小的格子里显示。由于用户上传的图片宽高比例不受限制,那么前端的显示处理不是裁剪就是留白。
不知何时,我看到QQ个人中心的图片展示添加了一种效果,鼠标移动,有超出格子范围的图片也跟着动。这样有个好处就是可以让用户看得到整张图片的信息。
我也来模拟一下这个效果,首先理一下思路:用户上传图片后服务端先是判断图片大小,若图片没有超出格子大小,不作处理;超过固定的格子大小的,再判断图片的横竖,若是横向图片,将图片等比缩小至高度跟格子高度一致,若是竖向图片(这里正方形也归为竖向图片),将图片等比缩小至宽度跟格子宽度一致。缩小后的图片放入格子中一个方向显示完整另一个方向的多余部分则被隐藏。
服务器处理后的图片显示情况
QQ中的移动效果是靠改变margin值来实现的,当然也可以通过定位来实现。这里我模仿QQ的,代码贴出来,欢迎指正。

提示:你可以先修改部分代码再运行。