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 相关文章推荐
js保存当前路径(cookies记录)
Dec 14 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 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
网站防止被刷票的一些思路与方法
2015/01/08 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
jquery鼠标停止移动事件
2013/12/21 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
pymysql的简单封装代码实例
2020/01/08 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
护理专科毕业推荐信
2013/11/10 职场文书
外贸英语专业求职信范文
2013/12/25 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
环保倡议书400字
2014/05/15 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
初中家长评语大全
2014/12/26 职场文书
裁员通知
2015/04/25 职场文书
人民检察院起诉书
2015/05/20 职场文书
python实现简单区块链结构
2021/04/25 Python
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
Linux磁盘管理方法介绍
2022/06/01 Servers
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS