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像素,这样就比较清楚了。 查看示例

The Google CDN

高性能网站建设指南中的规则2是使用内容发布网络,内容发布网络(CDN)是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容。

Google在他们的CDN上提供了很多流行的,开源的代码库,包括jQuery(和jQuery UI)。jQuery是一个非常流行的开源框架,在项目中用到的比较多。我们不必把jQuery文件放在自己的服务器上,可以让Google来节省部分带宽开销。使用Google CDN的另外一个好处是当用户访问其他站点时就已经从Google上下载了jQuery文件。当用户访问我们的网站时就会从缓存中载入,这样载入的时间会更快一些。我们也可以用同样的方法导入更多庞大的jQuery UI库,这会让使用jQuery站点的性能有所提高。

我们看到script标签中的URL指向的是Google的服务器,引用的jquery版本是1.4.0的。如果想引用最新版本,可以去掉版本的最后一个数字(例如1.4),这样他就会返回1.4系列的最新版本(1.4.2,1.4.3等),我们甚至可以只保留一个数字(1),让他自动选择整个1系列的最新版本,将来升级到jQuery 1.5的时候就能使用最新的版本了。不过我们需要注意的是版本的改变是否会影响到现有的方法。