首頁 > 文章 > web前端 > 使用JavaScript如何完成跟隨滾動緩衝運動廣告框？

使用JavaScript如何完成跟隨滾動緩衝運動廣告框？

黄舟原創: 2017-07-17 11:30:172153瀏覽

這篇文章主要為大家詳細介紹了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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：關於Javascript ES6中物件類型（Sets）的範例程式碼詳解下一篇：關於Javascript ES6中物件類型（Sets）的範例程式碼詳解

看更多