JavaScript实现跟随滚动缓冲运动广告框
更新时间：2022年03月31日 14:08:28 作者：梵海pp
这篇文章主要为大家详细介绍了JavaScript实现跟随滚动缓冲运动广告框，页面左右两边跟随式广告框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
当我们浏览一些网页时我们会发现页面的的边上会有广告图片，当滚动滚动条的时候这些广告图片会跟随性的随页面一起运动（这里我叫它为广告框）。一些网页的广告框是固定在浏览器上的用background：fixed；便可实现。这里我用JavaScript简单的制作了一个随滚动缓冲运动的广告框。
制作的原理比较简单，大家都有一个完美的js运动框架，这里的缓冲运动需要用到。这里的广告框设定的是跟随滚动条缓冲运动并运动到浏览器的中间位置。需要理解的是运动距离的计算和一些细节上的处理（一些BUG的预防）
这是我在这里使用的一个js运动框架，传递的参数只有一个并不是完美运动框架。传递的参数是广告框的运动距离，因此我在运动框架内又获取了一次对象。
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);
};
样式和布局代码
<style>
#div1{
width: 100px;
height: 100px;
background: #ccc;
position: absolute;
//使用绝对定位让其处于右上方
right: 0;
top: 0;
</style>
<body style="height: 2000px;">
<div id="div1"></div>
</body>
js代码
这里增加了.onscroll属性目的是当滚动滚动条的时候也加载页面,广告框就能随着滚动条一起运动了。还增加了.onresize属性，由于我要实现广告框一直是运动到浏览器的中间位置，然而当我改变浏览器高度的时候也要实现广告框的运动，所以增加该属性，当浏览器大小改变时加载。
<script>
window.onload=window.onscroll=window.onresize=function(){
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);
};
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在做调查问卷的过程中，遇到一个表格的统计问题，一个需要用到js方面的综合知识，感觉还不错所以记录下来与大家分享，感兴趣的朋友可以了解下2013-09-09
这篇文章主要给大家介绍了关于JavaScript键盘事件的相关资料,键盘事件是指在网页中当用户按下键盘上的按键时所触发的事件,在JavaScript中可以通过监听键盘事件来实现一些交互效果,需要的朋友可以参考下2023-10-10
JavaScript中valueOf函数与toString方法深入理解
基本上，所有JS数据类型都拥有valueOf和toString这两个方法，null除外。它们俩解决javascript值运算与显示的问题,本文将详细介绍，有需要的朋友可以参考下2012-12-12
这篇文章主要介绍了JS如何根据当前日期获取一周所有日期,文中通过实例代码补充介绍了js获取当前一周的时间,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要为大家详细介绍了JS实现微博发布功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
所有的JavaScript事件处理程序的作用域是在其定义时的作用域而非调用时的作用域中执行,并且它们能存取那个作用域中的任何一个本地变量。但是HTML标签属性注册处理程序就是一个例外。看下面四种方式2017-03-03
下面小编就为大家带来一篇ichart.js绘制虚线、平均分虚线效果的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-05-05
这篇文章主要介绍了通过JavaScript实现模态框拖拽的效果，以及鼠标松开，可以停止拖动模态框移动等功能，感兴趣的小伙伴可以了解一下2021-12-12
这篇文章主要为大家详细介绍了微信小程序实现顶部选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
下面小编就为大家带来一篇javascript的理解及经典案例分析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
最新评论