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操作word的参考代码
Oct 26 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
PHP文件大小格式化函数合集
2014/03/10 PHP
PHP错误机制知识汇总
2016/03/24 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Python向excel中写入数据的方法
2019/05/05 Python
python爬虫工具例举说明
2020/11/30 Python
python爬虫请求头的使用
2020/12/01 Python
selenium自动化测试入门实战
2020/12/21 Python
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
骨干教师培训感言
2014/01/16 职场文书
平民服装店创业计划书
2014/01/17 职场文书
个人作风剖析材料
2014/02/02 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
python 命令行传参方法总结
2021/05/25 Python
使用CSS连接数据库的方式
2022/02/28 HTML / CSS