JavaScript实现跟随滚动缓冲运动广告帧

当我们浏览一些网页时，会发现页面的侧面有广告图片，当滚动条滚动时，这些广告图片会跟随页面(我这里称之为广告框)。部分网页的广告框固定在浏览器上，背景：固定；可以实现。在这里，我使用JavaScript简单地制作一个随滚动缓冲区移动的广告帧。

制作原理比较简单。每个人都有一个完美的js运动帧，这里需要用到缓冲运动。这里的广告框被设置为跟随滚动条来缓冲移动，并移动到浏览器的中间位置。需要了解的是移动距离的计算和一些细节的处理(一些bug的预防)

这是我在这里使用的一个js运动帧，只有一个传递的参数不是完美的运动帧。传递的参数是广告帧的移动距离，所以我在移动帧中再次得到了对象。

var计时器=null函数start Mover(iTarget){ var oDiv=document . getelementbyid(' div 1 ')；clearInterval(计时器)；timer=setInterval(function(){ var is peed=(itar get-Odiv . offsettop)/8；//速度设置为逐渐降低ispeed=ispeed0？math . ceil(I speed): ath . floor(I speed)；//避免小数点if (odiv。offset top==itar get){ clear interval(timer)；} else { Odiv . style . top=Odiv . offsetTop is feed ' px '；} },30);};样式和布局代码

样式# div1 { width: 100px高度： 100像素；背景# ccc绝对位置：//使用绝对定位，使其位于右上角： 0；top : 0；/style body style=' height : 2000 px；'Div id='div1'/div /bodyjs代码

添加。onscroll属性是在滚动滚动条时加载页面，这样广告框就可以随着滚动条一起移动。我还添加了。onresize属性，因为我想实现广告框总是移动到浏览器的中间位置，但是当我改变浏览器的高度时，我也想实现广告框的移动，所以我添加了这个属性，并在浏览器大小改变时加载它。

script window . onload=window . onscroll=window . onresize=function(){ var oDiv=document . getelementbyid(' div 1 ')；var scroll top=document . document element . scroll top | | document . body . scroll top；“Scrolltop”是滚动条的滚动距离。有一个兼容的chrome不支持document . document element . scroll top acquisition语句，但其他浏览器支持。var t=(document . document element . client height-odiv . offsetheight)/2；t '是中间位置广告框的高度距离，(得到浏览器的总高度-广告框本身的高度)/2 start Mover(parsent(t scroll top))；“ParseIn”返回一个整数以避免十进制生成。这里，广告帧的总移动距离为(t scroll top)}；var计时器=null函数start Mover(iTarget){ var oDiv=document . getelementbyid(' div 1 ')；clearInterval(计时器)；timer=setInterval(function(){ var is peed=(itar get-Odiv . offsettop)/8；ispeed=ispeed0？math . ceil(I speed): ath . floor(I speed)；if(odiv . offsettop==iTarget){ clearInterval(定时器)；} else { Odiv . style . top=Odiv . offsetTop is feed ' px '；} },30);};/脚本以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。