在使用Google+的时候,查看某一相册,会经常看到,如下图所示的动画效果。
鼠标移入、移出时均有动画效果,咋一看估计是使用了css3的transform属性来实现动画效果的。
在网上搜索“Google+ 相册 效果”的时候发现有人使用CSS3做了这样的效果,不过使用调试工具查看节点元素的时候,我觉得它是使用JS在进行的控制。所以就用JS顺手写了一个,只是demo,可能还需要改进。
实例暂时仅支持较新版本的:Chrome、Safari、Firefox、Opera(其中Safari动画感觉不太流畅,所有浏览器中Chrome表现最好),示例请使用上述浏览器进行访问,演示地址>>
代码旋转的坐标值都是写死的,而google+里应该是算出来的,这里没有引用其它的js库/框架,代码不算多,思路算比较简单的(有优化的空间,有空封装和折腾一下)。
完整的示例代码:
>