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 相关文章推荐
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
VUE脚手架具体使用方法
May 20 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
微信小程序实现搜索功能
Mar 10 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
VueJs组件prop验证简单介绍
2017/09/12 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
一百多行python代码实现抢票助手
2018/09/25 Python
python中join()方法介绍
2018/10/11 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
怎样比较两个类型为String的字符串
2016/08/17 面试题
法律专业应届本科毕业生求职信
2013/10/25 职场文书
前台文员的岗位职责
2013/11/14 职场文书
自荐信的基本格式
2014/02/22 职场文书
亚运会口号
2014/06/20 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
详解Python生成器和基于生成器的协程
2021/06/03 Python
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers
SQL中的连接查询详解
2022/06/21 SQL Server