javascript运动框架解决了防抖动问题。
ScrollTop:有时一个网页很长,其高度大于显示高度,和它产生的滚动。然后,在高高的方向,卷的部分scrollTop。
VaR scrollTop = document.documentelement.scrolltop document.body.scrolltop | |;
offsettop:在距离特性的外边缘可以与父元素的在最近的距离内墙定位元素得到的,如果不是用于定位的父元素,得到的距离内墙从文档的边缘。所谓的位置,位置属性值是相对的,绝对的,或固定。
在图片中,黑色的盒子是一个网页文件,它的高度是:document.documentelement.scrollheight;
绿盒子目前客户区的可见部分(不包括工具栏、状态栏等),红盒固定在客户区的中心如果对联,高度很高,用户不停滚动,要求在对联的形式运动缓冲区在客户区右侧保持中央(位置:固定;能做的,而且非常稳定,滚动
但我们希望它在运动结束时结束。
1:位置和硬任务可以直接计算。
2:缓冲区移动到目标位置,效果比较柔和。
平时不要用第一种硬的,因为视觉效果很差,很生硬。
运动架(二)
{ *
填充:0;
保证金:0;
}
{ # DIV1
宽度:100px;
身高:200px;
背景:橙色;
位置:绝对;
权利:0;
}
无功odiv = document.getelementbyid('div1);
var定时器= null;
window.onscroll =函数(){
每一次/滚动页面,计算目标值,当前值offsettop
VaR scrollTop = document.documentelement.scrolltop document.body.scrolltop | |;
VaR指标=(document.documentelement.clientheight - odiv。offsetheight)/ 2 + scrollTop;
以下是一个艰苦的/好的位置赋值后,计算,以style.top直接价值,太硬
/ / odiv.style.top =目标;
startmove(目标);
};
功能startmove(指标){
ClearInterval(定时器);
定时器= setInterval(){()函数(
速度=(指标- odiv。offsettop) / 10;
速度=速度> 0 math.ceil(速度):Math.floor(速度);
如果(指标= = odiv。offsettop){
ClearInterval(定时器);
{人}
odiv.style.top = odiv.offsettop +速度+ 'px;
document.title =指标+,+ odiv.offsettop;
}
},30);
}
运行结果有问题,对联不停地抖动,而抖动offsettop来回变化不断,如图二所示:
看看上面的两张图片,看标题,计算目标值是十进制:267.5px,即对联的style.top值上,速度=(267.5 - 267)/ 10 - 1,268跨1px。
速度=(267.5 - 268)/ 10 - 1,从1像素,267,一直到267.5的目标值,使速度只能取整数的一篇文章中,和电脑不去小数Px,所以一直到267.5,所以一个僵局:退一步回来,也步,无情的!来回抖动!
如何求解,很简单,不允许目标值是十进制整数!
VaR指标=(document.documentelement.clientheight - odiv。offsetheight)/ 2 + scrollTop;
改变:
VaR目标= parseInt((document.documentelement.clientheight - odiv。offsetheight)/ 2 + scrollTop);
以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。