使用JavaScript如何完成跟随滚动缓冲运动广告框？-js教程-PHP中文网

使用JavaScript如何完成跟随滚动缓冲运动广告框？

黄舟

发布： 2017-07-17 11:30:17

原创

1988人浏览过

这篇文章主要为大家详细介绍了javascript实现跟随滚动缓冲运动广告框，页面左右两边跟随式广告框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

制作的原理比较简单，大家都有一个完美的js运动框架，这里的缓冲运动需要用到。这里的广告框设定的是跟随滚动条缓冲运动并运动到浏览器的中间位置。需要理解的是运动距离的计算和一些细节上的处理（一些BUG的预防）

这是我在这里使用的一个js运动框架，传递的参数只有一个并不是完美运动框架。传递的参数是广告框的运动距离，因此我在运动框架内又获取了一次对象。

var timer=null;
    function startMover(iTarget){
      var op=document.getElementById(&#39;p1&#39;);
      clearInterval(timer);
      timer=setInterval(function(){
          var ispeed=(iTarget-op.offsetTop)/8;
          //速度设置为逐渐减小
          ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
          //避免速度产生小数点
          if(op.offsetTop==iTarget){
            clearInterval(timer);
          }
          else{
          op.style.top=op.offsetTop+ispeed+"px";
          }

    },30);
    };

登录后复制

样式和布局代码

  <style>
    #p1{
      width: 100px;
      height: 100px;
      background: #ccc;
      position: absolute;
      //使用绝对定位让其处于右上方
      right: 0;
      top: 0;
  </style>

  <body style="height: 2000px;">
    <p id="p1"></p>
  </body>

登录后复制

js代码

这里增加了.onscroll属性目的是当滚动滚动条的时候也加载页面,广告框就能随着滚动条一起运动了。还增加了.onresize属性，由于我要实现广告框一直是运动到浏览器的中间位置，然而当我改变浏览器高度的时候也要实现广告框的运动，所以增加该属性，当浏览器大小改变时加载。

<script>
    window.onload=window.onscroll=window.onresize=function(){

      var op=document.getElementById(&#39;p1&#39;);
      var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
"scrolltop"是滚动条滚动的距离，这里有一个兼容chrome不支持document.documentElement.scrollTop获取语句，其他浏览器支持。          
      var t=(document.documentElement.clientHeight-op.offsetHeight)/2;
"t"为让广告框处于中间位置的高度距离，（获取浏览器的总高度-广告框自身高度）/2      
      startMover(parseInt(t+scrolltop));
"parseIn"返回一个整数，避免小数生成。这里广告框的总移动距离为（t+scrolltop）    
    };

    var timer=null;
    function startMover(iTarget){
      var op=document.getElementById(&#39;p1&#39;);
      clearInterval(timer);
      timer=setInterval(function(){
          var ispeed=(iTarget-op.offsetTop)/8;

          ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);

          if(op.offsetTop==iTarget){
            clearInterval(timer);
          }
          else{
          op.style.top=op.offsetTop+ispeed+"px";
          }

    },30);
    };

  </script>

登录后复制

当滚动条滚动到菜单位置时，怎样让他固定到浏览器顶端，当滚动条回到他原来位置时，他就停在哪里。
网上很多都是要引用一个jquery插件，感觉很麻烦。
该怎样写一个这样的效果呢？

大致写个思路吧，肯定是自己调试比直接引用jQuery插件麻烦大家才会纷纷引插件来用

用onscroll事件判断用户滚动的位置，用菜单元素的offsetTop属性判断它的显示位置

如果滚动到了菜单到顶的时候，把菜单的display改成fixed

等下一个菜单滚到某个适当的位置时，把原来菜单的diplay改回来，把新菜单改成fixed

以上就是使用JavaScript如何完成跟随滚动缓冲运动广告框？的详细内容，更多请关注php中文网其它相关文章！