大佬教程收集整理的这篇文章主要介绍了JavaScript实现跟随滚动缓冲运动广告框，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
当我们浏览一些网页时我们会发现页面的的边上会有广告图片，当滚动滚动条的时候这些广告图片会跟随性的随页面一起运动（这里我叫它为广告框）。一些网页的广告框是固定在浏览器上的用BACkground：fixed；便可实现。这里我用JavaScript简单的制作了一个随滚动缓冲运动的广告框。
制作的原理比较简单，大家都有一个完美的js运动框架，这里的缓冲运动需要用到。这里的广告框设定的是跟随滚动条缓冲运动并运动到浏览器的中间位置。需要理解的是运动距离的计算和一些细节上的处理（一些BUG的预防）
这是我在这里使用的一个js运动框架，传递的参数只有一个并不是完美运动框架。传递的参数是广告框的运动距离，因此我在运动框架内又获取了一次对象。
},30);
};样式和布局代码
js代码
这里增加了.onscroll属性目的是当滚动滚动条的时候也加载页面,广告框就能随着滚动条一起运动了。还增加了.onresize属性，由于我要实现广告框一直是运动到浏览器的中间位置，然而当我改变浏览器高度的时候也要实现广告框的运动，所以增加该属性，当浏览器大小改变时加载。
var oDiv=document.getElementById('div1');
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;"scrolltop"是滚动条滚动的距离，这里有一个兼容chrome不支持document.documentElement.scrollTop获取语句，其他浏览器支持。
var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
"t"为让广告框处于中间位置的高度距离，（获取浏览器的总高度-广告框自身高度）/2
startMover(parseInt(t+scrolltop));
"parseIn"返回一个整数，避免小数生成。这里广告框的总移动距离为（t+scrolltop）
};
var timer=null;
function startMover(iTarget){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=seTinterval(function(){
var ispeed=(iTarget-oDiv.offsetTop)/8;
ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
if(oDiv.offsetTop==iTarget){
clearInterval(timer);
}
else{
oDiv.style.top=oDiv.offsetTop+ispeed+"px";
}
},30);
};以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持菜鸟教程。
以上是大佬教程为你收集整理的JavaScript实现跟随滚动缓冲运动广告框全部内容，希望文章能够帮你解决JavaScript实现跟随滚动缓冲运动广告框所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。