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 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
js利用拖放实现添加删除
Aug 27 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
一次编写,随处运行
2006/10/09 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
php模板引擎技术简单实现
2016/03/15 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
python flask 多对多表查询功能
2017/06/25 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Python sorted排序方法如何实现
2020/03/31 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
新闻专业应届生求职信
2013/10/31 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
促销活动总结
2014/04/28 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
助学贷款贫困证明
2014/09/23 职场文书
安全教育第一课观后感
2015/06/17 职场文书