页面左右两边跟随式广告框

当我们浏览一些网页时我们会发现页面的的边上会有广告图片，当滚动滚动条的时候这些广告图片会跟随性的随页面一起运动（这里我叫它为广告框）。一些网页的广告框是固定在浏览器上的用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>

页面左右两边跟随式广告框相关推荐

Unity3dRPG 相机跟随player旋转_跟随式灌装机
跟随式灌装机,广州市胜川包装设备有限公司是酱料定量灌装机.膏体定量灌装机.液体定量灌装机.三(四)旋盖玻璃瓶旋盖机.螺纹盖自动旋盖机.广口瓶封口机.电磁感应铝箔封口机.真空封罐机.聚脂瓶封口机.真空包 ...
手游摇杆(三)跟随式摇杆
手游摇杆: (零)摇杆设计原理 (一)最简单的四方向摇杆 (二)八方向摇杆和移动范围限制 (三)跟随式摇杆前一篇博客实现的固定式摇杆,市面上很多游戏中都使用了这种方式.最后提到了一个不是太理想的点, ...
springwebflux 页面_Spring Webflux 响应式框架入门
@Componentpublic classBannerHandler { @AutowiredprivateBannerService bannerService;public MonogetLis ...
如何在页面插入一个跟随页面移动的盒子_word版面设计技巧：文档页面背景的设置方法...
编按:办公过程中,经常会使用Word制作各种各样的文档,有时会觉得空白的Word文档背景看起来实在是太单调乏味,这时候我们可以为文档添加一些背景元素,来美化文档.那么,接下来我就将教大家如何设置页面背 ...
网络应用发布到linux上的web服务器上页面上显示麻将牌式字符的问题
什么是麻将牌式字符,就是中文显示为一个竖立长方形框框里面有四个数字或字母,请看下图中中文,日文和韩文的显示就知道了: 为什么会遇到这个问题? 系统不支持中文,日文和韩文字体. 如何解决: 安装中文字体 ...
前端设置页面字体尺寸跟随屏幕大小而进行变化
越来越多的前端项目现在需要这个操作,其操作的原因很简单,你的项目可能跑在小尺寸分辨率的电脑上,也有可能在大尺寸的会议平板上,更有甚者是在LED上.那么如何让你的项目根据屏幕分辨率的大小而自动变化,修改 ...
jQuery实现浮动层跟随页面滚动效果
在本例中,我用到了一个重要的插件:scroll-follow,该插件在当前主流浏览器IE6+, FF2+, Safari 3,and Opera 9均测试通过,具有可配置参数,使用简单的特点. XHT ...
html页面的响应式布局,HTML+CSS十分钟实现响应式布局页面，响应式布局实战教程...
承蒙各位小伙伴的支持,鄙人有幸入围了<CSDN 2020博客之星>的前200名,现在进入投票环节,如果我平时写的文章和分享对你有用的话,请每天点击一下这个链接,投上你们宝贵的一票吧!谢谢! ...
【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
文章目录一.移动端页面布局方案 1.单独制作的移动端页面 2.响应式页面兼容移动端一.移动端页面布局方案移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端与移动端访问 ...

页面左右两边跟随式广告框

页面左右两边跟随式广告框相关推荐

最新文章

热门文章