<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的意思。
最后动画完成,从头再继续执行
收藏学习