DFdou's Blog Life is short,Be yourself.

jQuery-each(fn)的使用

最近在忙这更Lazystudio.cn/guestbook的进度，由于木有人提供美工意见，so，现在全部的美工状况…就别提了～
本来想在页面输出div之后根据屏幕宽度来让div实现同DFdou’s留言板一样的效果随机分布，如果能加animate效果那是最好了。
但是昨天因为不知道jQuery的each(fn)，所以错误的尝试了js获取屏幕宽度后传值给php，然后由php输出div的时候设置element的left跟top这种不讨好的做法。
当时的做法是，在加载页面时先通过js获取屏幕的宽度跟高度，然后重新location给页面传参，再通过php获取get的值来设置div的element属性。
唉，个人觉得这个方法太笨，太别扭，太不Web2.0 所以决定做一个修改。
从学妹那得知有each(fn)这个东西的存在，参考了下，可以完美使用，嘿嘿，下边是js代码部分：
哦，对了，先放Demo地址http://lazystudio.cn/guestbook/，另一个demo地址http://nwhy.org/jquery-animation.html
Demo中每个div的class为e_post～
PS：请确保您的页面加载了jQuery+easing Plungin。。

$(".e_post").each(function(i){$(this).animate({left:Math.random()*(screen.width-300),top:Math.random()*(screen.height-500)}, Math.random()*2000, 'easeInQuint')});

each这个用起来比较简单，官方文档的说明是：以每一个匹配的元素作为上下文来执行一个函数。这意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数。
我们可以假设，js在执行的时候会先读取全部$(".e_post")，然后压入一个数组，接着，就开始fn的循环，从第0个$(".e_post")开始，到第最后一个$(".e_post")结束。
上例中的处理是，对每个$(".e_post")进行left和top的animate设置，如left的值是设置为0到当前屏幕分辨率的值-300之间的一个随机数。
由于each(fn)是个循环体，所以每次的Math.random()值会重新计算，so，每个$(".e_post")的位置也会因此不同。
PS：别鄙视我，我就是喜欢万恶的Math.random()，多好啊，乱糟糟的排列。
关于div的拖动，请使用easydrag Plungin。。这个插件没有显示可拖动范围为屏幕宽度，唉，没有Flash方便嘿嘿，不过看了下QQ爱墙也是木有限制，就放弃修改这个了。
等咱有这能力了再说，哈哈。下边是加载easydrag Plungin后让class为e_post的div可拖动的代码：

$(".e_post").easydrag();

恩，看完有兴趣的可以在Lazystudio的留言板留个言哦～
PS：js使用起来比Flash不习惯些，有些地方确实无法做到Flash的效果，但是资源占用率比Flash底很多，唉，DFdou’s留言板那里的动画，加多点效果就会卡死一部分浏览器……