Heim > Artikel > Web-Frontend > Wie vervollständige ich mit JavaScript das folgende Werbefeld für Scroll-Puffer-Bewegungen?

Wie vervollständige ich mit JavaScript das folgende Werbefeld für Scroll-Puffer-Bewegungen?

黄舟Original: 2017-07-17 11:30:172153Durchsuche

In diesem Artikel wird hauptsächlich JavaScript zur Realisierung des folgenden Werberahmens mit Bildlaufpuffer vorgestellt. Die folgenden Werberahmen auf der linken und rechten Seite der Seite haben einen gewissen Referenzwert .

Wenn wir einige Webseiten durchsuchen, werden wir feststellen, dass sich am Rand der Seite Werbebilder befinden. Wenn die Bildlaufleiste gescrollt wird, folgen diese Werbebilder der Bewegung der Seite (hier rufe ich auf). es ist eine Werbebox). Die Werberahmen einiger Webseiten sind im Browser fixiert, was durch die Verwendung von Hintergrund: behoben; erreicht werden kann. Hier habe ich mithilfe von JavaScript einfach eine Werbebox erstellt, die sich mit dem Scroll-Puffer bewegt.

Das Produktionsprinzip ist relativ einfach. Jeder hat ein perfektes js-Bewegungsframework, und die Pufferbewegung muss hier verwendet werden. Das Werbefeld ist hier so eingestellt, dass es der Bewegung des Bildlaufleistenpuffers folgt und sich in die mittlere Position des Browsers bewegt. Was verstanden werden muss, ist die Berechnung der Bewegungsentfernung und einige detaillierte Verarbeitung (Verhinderung einiger Fehler).

Dies ist ein js-Bewegungsframework, das ich hier verwende. Es wird nur ein Parameter übergeben, der keine perfekte Bewegung ist Rahmen. Der übergebene Parameter ist die Bewegungsdistanz des Werberahmens, sodass ich das Objekt wieder innerhalb des Bewegungsrahmens erhalte.

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);
    };

Stil- und Layoutcode

  <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-Code

Das .onscroll-Attribut wird hier zu dem Zweck hinzugefügt Scrollen beim Scrollen Beim Laden der Seite verschiebt sich die Werbebox mit der Bildlaufleiste. Ich habe auch das Attribut .onresize hinzugefügt, da ich erkennen möchte, dass sich der Werberahmen immer in die mittlere Position des Browsers bewegt, aber wenn ich die Höhe des Browsers ändere, muss ich die Bewegung auch realisieren des Werberahmens, daher füge ich dieses Attribut hinzu, das geladen wird, wenn sich die Browsergröße ändert.

<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>

Wenn die Bildlaufleiste zur Menüposition scrollt, wird sie oben im Browser fixiert und wenn die Bildlaufleiste in ihre ursprüngliche Position zurückkehrt, stoppt sie dort.
Viele Leute im Internet müssen ein JQuery-Plug-In zitieren, was sehr mühsam ist.
Wie schreibt man einen solchen Effekt?

Lassen Sie uns eine grobe Idee aufschreiben. Das Debuggen selbst muss schwieriger sein, als direkt auf das jQuery-Plug-in zu verweisen, sodass jeder das Plug-in nacheinander verwenden wird Verwenden Sie das Onscroll-Ereignis, um die Scrollposition des Benutzers zu bestimmen, und verwenden Sie das offsetTop des Menüelements. Das Attribut bestimmt seine Anzeigeposition

Wenn das Menü nach oben gescrollt wird, ändern Sie die Anzeige des Menüs auf „Fest“

Wenn das nächste Menü an eine geeignete Position gescrollt wird, ändern Sie die Anzeige des ursprünglichen Menüs. Ändern Sie die Anzeige zurück und ändern Sie das neue Menü auf „Fest“

Das obige ist der detaillierte Inhalt vonWie vervollständige ich mit JavaScript das folgende Werbefeld für Scroll-Puffer-Bewegungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung des Beispielcodes für Objekttypen (Sets) in Javascript ES6Nächster Artikel：Detaillierte Erläuterung des Beispielcodes für Objekttypen (Sets) in Javascript ES6

In Verbindung stehende Artikel

Mehr sehen