解决图像稳定器问题和挂起对联的JavaScript运动框架(2)

本文的例子是JavaScript运动框架的应用(1)

ScrollTop:有时候网页很长，其高度大于显示器的高度，会造成滚动。在高度方向上，“滚走”部分是滚动顶部

var scroll top=document . document element . scroll top | | document . body . scroll top；

OffsetTop:该属性可以获取当父元素还没有定位时，元素的上外边缘与文档内壁之间的距离。定位是指位置属性值是相对的、绝对的或固定的。

图中黑框为网页文档，高度为document . document element . scroll height；

绿色框是客户区域当前可见的部分(不包括工具栏、状态栏等)。)，红框是要固定在客户区中心的对联。如果网页高度很高，用户不断滚动，要求对联以缓冲移动的形式保持在客户区右侧中央(postion:fixed可以做到，而且可以做得非常稳定。滚动网页，div还焊接在那里)。

但我们希望它最终在目标位置：

1:可以直接算位置，硬赋；2.缓冲移动到目标位置，效果更柔和。一般不要用第一种硬的，因为视觉效果很差，很生硬。

！doctype html head metharset=' utf-8 ' title motion frame(2)/title style type=' text/CSS ' * { padding : 0；margin : 0；} # div1 { width: 100px高度： 200 px；背景：橙色；绝对位置：right : 0；}/style/head body style=' height : 30000000 px；'div id='div1'/div脚本类型=' text/JavaScript ' var oDiv=document . getelementbyid(' div 1 ')；var计时器=nullWindow.onscroll=function() {//每次滚动网页都需要重新计算目标值，当前值为offset top var scroll top=document . document element . scroll top | | document . body . scroll top；var target=(document . document element . client height-odiv . offsetheight)/2 scroll top；//下面是一个硬作业。计算位置后，直接将值支付给style.top，太生硬了。//odiv . style . top=target；startMove(目标)；};函数startMove(iTarget){ clearInterval(计时器)；timer=setInterval(function(){ var speed=(itar get-odiv . offsettop)/10；速度=速度0？数学天花板(速度):数学地板(速度)；if(itar get==Odiv . offsettop){ clearInterval(定时器)；} else { Odiv . style . top=Odiv . offset top speed ' px '；document.title=iTarget '，' oDiv.offsetTop} }, 30);} /script/body/html运行结果有问题，对联一直抖，说明offsetTop一直在来回变化，如下图所示：

看上面两个图，看标题，算出来的目标值是小数：267.5px，也就是对联要留在最后的style.top值，speed=(267.5-267)/101，跨度1px到268，speed=(267.5-268)/10 - 1，后面1px 267.5的目标值一直达不到。上一篇文章中速度只能四舍五入，电脑不带几个px，所以始终达不到267.5，所以陷入了僵局：步步为营，过关，退一步，狠心！来回摇！怎么解决很简单。目标值不允许是小数：四舍五入！

var target=(document . document element . client height-odiv . offsetheight)/2 scroll top；

替换为：

var target=parsent((document . document element . client height-odiv . offsetheight)/2 scroll top)；

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。