<script language="javascript" type="text/javascript"> var b = window.b || {}; b.roll = function () { var me = this; setTimeout(function () { me.x = document.getElementsByTagName("ul"); me.y = document.getElementsByTagName("li"); me.z = me.y.item(me.y.length - 1); me.q = me.z.clientHeight; me.z.style.opacity = 0; me.z.style.filter = "alpha:(opacity=0)"; me.z.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + 0 + ")"; me.z.style.height = "0px"; me.x[0].insertBefore(me.z, me.y[0]); me.t = 1; me.c = 0 me.i = setInterval(function () { me.t++; me.z.style.height = Math.round(me.q * (me.t / 50) * (me.t / 50)) + "px"; if (me.t >= 50) { clearInterval(me.i); me.d = setInterval(function () { me.c += 0.02 if ("\v" == "v") { me.z.style.filter = "alpha:(opacity=" + me.c * 100 + ")"; me.z.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + me.c * 100 + ")"; } me.z.style.opacity = me.c; if (me.c >= 1) { clearInterval(me.d); } }, 50) } }, 25) b.roll(); }, 5000); } new b.roll(); </script>
有哪位高手能解释一下这段代码?
这段代码并不复杂,没有特别难懂的知识点,最难懂的估计就是变量名太短容易混淆吧。
不过这段代码有缺陷倒是真的,里面很多不该重复定义的变量都在每次的setTimeout中重复了,浪费
请问能简要说明一下这段代码的各个部分的意思吗?
@qrtthb: 我看错了,原来setTimeout中的函数需要一次次的执行
代码的意思是,依次得到ul,ul下的所有li,以及最后一个li.并把最后一个li设为透明,且高度为0。之后把最后一个li插入到ul中变成第1个。
然后整了两人变量me.t和me.c,用作动画用——即setInterval里面了。动画中先是将li的height由0动画到原始高度,当me.t大于50时,再将li的透明度从0变到1,其中
if ("\v" == "v")是判断IE的意思。
最后动画完成,从头再继续执行
收藏学习