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


Posted in Javascript onJuly 15, 2017

当我们浏览一些网页时我们会发现页面的的边上会有广告图片,当滚动滚动条的时候这些广告图片会跟随性的随页面一起运动(这里我叫它为广告框)。一些网页的广告框是固定在浏览器上的用background:fixed;便可实现。这里我用JavaScript简单的制作了一个随滚动缓冲运动的广告框。

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 相关文章推荐
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
js实现烟花特效
Mar 02 Javascript
Javascript实现基本运算器
Jul 15 #Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 #Javascript
Javascript实现时间倒计时效果
Jul 15 #Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 #Javascript
JavaScript实现时间表动态效果
Jul 15 #Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 #Javascript
JavaScript实现三级联动效果
Jul 15 #Javascript
You might like
php getsiteurl()函数
2009/09/05 PHP
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
Python学习笔记(二)基础语法
2014/06/06 Python
Python中的ctime()方法使用教程
2015/05/22 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
python设计模式大全
2016/06/27 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
介绍一下游标
2012/01/10 面试题
学生逃课万能检讨书2000字
2015/02/17 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
上班迟到检讨书
2015/05/06 职场文书
初中同学会致辞
2015/08/01 职场文书
预备党员入党感想
2015/08/10 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers