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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了在JavaScript中分解数字的三种方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
这篇文章主要为大家详细介绍了js实现简单的前端分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
JS中怎么连接数据库,和提取数据库中的数据,本文将以此问题详细介绍，需要的朋友可以了解下2012-11-11
想必大家对图片翻转效果都有所了解吧，其实很容易实现的，下面有个不错的示例，喜欢的朋友可以参考下2014-01-01
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
这篇文章主要介绍了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果,涉及javascript基于onscroll事件动态改变页面元素样式的相关技巧,需要的朋友可以参考下2016-08-08
下面小编就为大家带来一篇JS操作时间 - UNIX时间戳的简单介绍(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了Swiper.js插件超简单实现轮播图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了javascript实现左右控制无缝滚动的方法及示例代码,需要的朋友可以参考下2014-12-12
彻底搞懂JavaScript中的apply和call方法(必看)
下面小编就为大家带来一篇彻底搞懂JavaScript中的apply和call方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了JS实现浏览器状态栏显示时间的方法,涉及JavaScript针对时间及状态栏操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
最新评论