随滚动条缓冲移动的层

2006-01-15 22:02:54

[code] <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>漂浮横向滚动</title> <script> var cur=0; function goto(pos){ if (pos>=cur){ location.hash="#b"+pos; } else{ location.hash="#t"+pos; } cur=pos; } </script> </head> <body> <div id="oLayer" style="position:absolute;left:844px;top:481px;"> <table> <tr> <td><A href="javascript:goto(1)">01</A></td> <td><A href="javascript:goto(2)">02</A></td> <td><A href="javascript:goto(3)">03</A></td> <td><A href="javascript:goto(4)">04</A></td> <td><A href="javascript:goto(5)">05</A></td> </tr> </table> </div> <SCRIPT> //变量init_pos为层的最初X坐标值,last_pos为层最后一次移动后的X坐标值,在下面的函数执行之前它们是相等的 var init_pos=last_pos=oLayer.style.posLeft //setInterval(表达式或函数,时间)的作用是每隔一段时间(单位:毫秒)之后执行一次表达式或函数, //这里是每1毫秒(千分一秒)执行一次函数 setInterval(function scrollit(){ //层要移动到的目标坐标 target_pos=document.body.scrollLeft+init_pos //步长,目标位置减上一次移动后的位置的十分一(10是经验数字,换成其它值的话效果会产很远),因为last_pos //是不断接近target_pos的,所以step的绝对值也越来越小,这就是产生弹性移动的原因。最后"|0"的意思是把前 //面的计算结果跟0进行二进制的按位“或”运算,作用等同于Math.floor(),只是效率更高 step=(target_pos-last_pos)/10|0 //以step为步长移动层 oLayer.style.posLeft+=step //更新变量last_pos的值,没有这步也不可能产生弹性移动效果 last_pos+=step //这里的1是1毫秒 },1) </script> <table width="5100" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="1002" bgcolor="#FF0000"><div style="float:left" id="t1">111111111111111111111111111111</div><div style="float:right" id="b1">111111111111111111111111111111</div></td> <td width="1002" bgcolor="#00FF00"><div style="float:left" id="t2">222222222222222222222222222222</div><div style="float:right" id="b2">222222222222222222222222222222</div></td> <td width="1002" bgcolor="#0000FF"><div style="float:left" id="t3">333333333333333333333333333333</div><div style="float:right" id="b3">333333333333333333333333333333</div></td> <td width="1002" bgcolor="#FFFF00"><div style="float:left" id="t4">444444444444444444444444444444</div><div style="float:right" id="b4">444444444444444444444444444444</div></td> <td height="100" width="1002" bgcolor="#00FFFF"><div style="float:left" id="t5">555555555555555555555555555555</div><div style="float:right" id="b5">555555555555555555555555555555</div></td> </tr> </table> </body> </html> [/code]