js模拟窗口抖动

目前一般的聊天工具都会带一个有意思的功能——窗口抖动,最近研究了下,下面我来模拟一个比较简单的抖动功能。
原理很简单,就是让一个窗口相对于它原来的位置朝四个方向顺时针或者逆时针迅速地偏移几个像素。
首先我们写一个空的div来模拟一个窗口,下面是这个div的基本样式(注意,这里的抖动元素应该设置为绝对定位):

下面是js代码:

其中s[p[i % 2]] = f[i % 2] + ((i++) % 4 < 2 ? -2 : 2) + "px";是关键代码。一开始看起来可能有点困难,我们可以把它当代数一样代入相应的数字或代码,比如当i=0时:o.style['left']=o.offsetLeft+(-2)+'px';也就是向左偏移2像素,这样就比较清楚了。 查看示例