随滚动条滚动而移动的层(弹性菜单)

来源:互联网 发布:36氪源码 编辑:程序博客网 时间:2024/06/05 02:53
<div id="oLayer" style="position:absolute;left:30;top:60;"> <img src="/upload/2006-10-18/2006101810571592235.gif"> </div> <SCRIPT> document.write(new Array(100).join("<br>")) var init_pos=last_pos=oLayer.style.posTop setInterval(function scrollit(){ target_pos=document.body.scrollTop+init_pos step=(target_pos-last_pos)/10|0 oLayer.style.posTop+=step last_pos+=step },1) </script> 核心代码解释 <SCRIPT> //输出99个<br> document.write(new Array(100).join("<br>")) //变量init_pos为层的最初Y坐标值,last_pos为层最后一层移动后的Y坐标值,在下面的函数执行之前它们是相等的 var init_pos=last_pos=oLayer.style.posTop //setInterval(表达式或函数,时间)的作用是每隔一段时间(单位:毫秒)之后执行一次表达式或函数,这里是每1毫秒(千分一秒)执行一次函数 setInterval(function(){ //目标坐标,上两篇教程里解释过具体意思了 var target_pos=document.body.scrollTop+init_pos //步长,目标位置减上一次移动后的位置的十分一(10是经验数字,换成其它值的话效果会产很远),因为last_pos是不断接近target_pos的,所以step的绝对值也越来越小,这就是产生弹性移动的原因。最后"|0"的意思是把前面的计算结果跟0进行二进制的按位“或”运算,作用等同于Math.floor(),只是效率更高 var step=(target_pos-last_pos)/10|0 //以step为步长移动层 oLayer.style.posTop+=step //更新变量last_pos的值,没有这步也不可能产生弹性移动效果 last_pos+=step //这里的1是1毫秒 },1) </script>
原创粉丝点击