随滚动条滚动而移动的层

最新推荐文章于 2019-03-15 13:31:11 发布

koushenglong

最新推荐文章于 2019-03-15 13:31:11 发布

阅读量383

点赞数

分类专栏：其它文章标签： function 文档 flash 三星测试

本文链接：https://blog.csdn.net/koushenglong/article/details/2582283

版权

其它专栏收录该内容

30 篇文章 0 订阅

订阅专栏

[原理分析]随滚动条滚动而移动的层这个效果估计大家见得多了，如果没见过也没关系，先运行一下下面的代码看效果：代码如下： <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 fixpos=oLayer.style.posTop document.body.οnscrοll=function(){ oLayer.style.posTop=document.body.scrollTop+fixpos } </script> ------->525网站设计<---------

----------------------------------------------------------------------------------------------- 代码解释： <div id="oLayer" style="position:absolute;left:30;top:60;"><img src="/upload/2006-10-18/2006101810571592235.gif";></div> 这个是层，不用多解释了吧？ document.write(new Array(100).join("<br>")) 这个是为了观看效果，插入99个<br>换行的代码，在实际应用时可以删掉 var fixpos=oLayer.style.posTop 初始化变量fixpos为层oLayer的Y坐标值，posTop和pixelTop取到的值是纯数字，而top取到的是带"px"单位的字符串，可以运行下面的代码测试一下： ------->525网站设计<---------

------------------------------------------------------------------------------------- 看下面代码： <div id="oLayer" style="position:absolute;left:30;top:60;"> <button οnclick=’with(oLayer.style)alert("posTop:"+posTop+"/tType:"+typeof(posTop)+"/n/npixelTop:"+pixelTop+"/tType:"+typeof(pixelTop)+"/n/ntop:"+top+"/t/tType:"+typeof(top))’>Click Me!</button> </div> 解释说明：document.body.οnscrοll=function(){ oLayer.style.posTop=document.body.scrollTop+fixpos } 这个是在文档区域拖动滚动条时执行的函数，第二行是重新设置层oLayer的Y坐标document.body.scrollTop等于滚动滑块上端离滚动的开始点的距离，正规点的解释是：设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。 ------->525网站设计<---------

----------------------------------------------------------------------------- 如果还理解不了就运行一下下面的代码看看<body οnlοad="fixpos=oLayer.style.posTop" οnscrοll="oLayer.style.posTop=document.body.scrollTop+fixpos"> <div id="oLayer" style="position:absolute;left:30;top:60;"> <button οnclick=alert(document.body.scrollTop)>点击查看document.body.scrollTop的值</button> </div> <script> document.write(new Array(100).join("<br>")) </script> oLayer.style.posTop=document.body.scrollTop+fixpos 整句的意思就是设置层oLayer的Y坐标为文档区域的滚动条已滚动量加上层的原Y轴坐标值之和不知道大家有没有注意到，层oLayer的移动很突然，没有平滑移动的过程，立刻就跳到目标位置，想知道怎样修改使它的移动变得平滑么？ ------->525网站设计<--------- -------------------------------------------------------------------------------- 先运行一下代码看效果，看看效果与之前的有什么不同？ <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=oLayer.style.posTop document.body.οnscrοll=function scrollit(){ var target_pos=document.body.scrollTop+init_pos var step=5 if(oLayer.style.posTop>target_pos) step*=-1 oLayer.style.posTop+=step if(Math.abs(oLayer.style.posTop-target_pos)>Math.abs(step)) setTimeout("scrollit()",50) } </script> 可以看到，现在层现在是以一个固定的速度移动的，解释一下核心代码： <script> document.write(new Array(100).join("<br>")) var init_pos=oLayer.style.posTop //初始化变量init_pos为层oLayer的Y坐标值 document.body.οnscrοll=function scrollit(){ //文档区域滚动时执行scrollit()函数 var target_pos=document.body.scrollTop+init_pos //层要移动到的目标坐标 var step=5 //变量step为步长，层每次移动的距离量 if(oLayer.style.posTop>target_pos) //如果是往上拉滚动条，步长应为负值 step*=-1 oLayer.style.posTop+=step //层的Y坐标值增加 if(Math.abs(oLayer.style.posTop-target_pos)>Math.abs(step)) //判断层的当前Y坐标值跟目标距离间的值是否大于一个定值，是的话在50毫秒后继续执行一次scrollit()函数，否则层停止在当前位置 setTimeout("scrollit()",50) } </script> 然而，层的移动仍然不够自然，缺少弹性，那要怎么改？

------->525网站设计<--------- -------------------------------------------------------------------------------- 相信大家都知道三星的Flash弹性菜单。 <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> ------->525网站设计<--------- -------------------------------------------------------------------------------- 横向滚动时固定的： <div id="oLayer" style="position:absolute;left:30;top:60;"> <img src="/upload/2006-10-18/2006101810571592235.gif"> </div> <SCRIPT> document.write(new Array(200).join("！！！！！！")) var init_pos=last_pos=oLayer.style.posLeft setInterval(function scrollit(){ target_pos=document.body.scrollLeft+init_pos step=(target_pos-last_pos)/10|0 oLayer.style.posLeft+=step last_pos+=step },1) </script> ------->525网站设计<--------- -------------------------------------------------------------------------------- 再告诉你一个更简单的办法： <body><img src="http://www.525asp.com/News/xxx.gif" style="position:absolute;left:20px;top:expression(parseInt(document.body.scrollTop)+20);"><img width="1" height="2000"></body>