Maison > Article > interface Web > Comment utiliser JavaScript pour compléter la boîte publicitaire de mouvement du tampon de défilement suivante ?

Comment utiliser JavaScript pour compléter la boîte publicitaire de mouvement du tampon de défilement suivante ?

黄舟original: 2017-07-17 11:30:172153parcourir

Cet article présente principalement en détail JavaScript pour réaliser le cadre publicitaire de mouvement du tampon de défilement suivant. Les cadres publicitaires suivants sur les côtés gauche et droit de la page ont une certaine valeur de référence. .

Lorsque nous parcourons certaines pages Web, nous constaterons qu'il y a des images publicitaires sur le côté de la page. Lorsque la barre de défilement défile, ces images publicitaires suivront le mouvement de la page (ici j'appelle). c'est une boîte publicitaire). Les cadres publicitaires de certaines pages Web sont fixes sur le navigateur, ce qui peut être réalisé en utilisant background:fixed;. Ici, j'ai utilisé JavaScript pour créer simplement une boîte publicitaire qui se déplace avec le tampon de défilement.

Le principe de production est relativement simple. Tout le monde a un cadre de mouvement js parfait, et le mouvement tampon ici doit être utilisé. La boîte publicitaire ici est configurée pour suivre le mouvement du tampon de la barre de défilement et se déplacer vers la position médiane du navigateur. Ce qu'il faut comprendre, c'est le calcul de la distance de mouvement et certains traitements détaillés (prévention de certains BUG)

Il s'agit d'un framework de mouvement js que j'utilise ici. Il n'y a qu'un seul paramètre passé, ce qui n'est pas un mouvement parfait. cadre. Le paramètre transmis est la distance de déplacement du cadre publicitaire, je récupère donc l'objet dans le cadre de mouvement.

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

Code de style et de mise en page

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

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

code js

L'attribut .onscroll est ajouté ici dans le but de défilement lors du défilement Lorsque la page est chargée, la boîte publicitaire se déplacera avec la barre de défilement. J'ai également ajouté l'attribut .onresize Puisque je souhaite que le cadre publicitaire se déplace toujours au milieu du navigateur, mais lorsque je modifie la hauteur du navigateur, je souhaite également implémenter le mouvement de la publicité. frame, j'ajoute donc cet attribut, chargé lorsque la taille du navigateur change.

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

Lorsque la barre de défilement défile jusqu'à la position du menu, comment la fixer en haut du navigateur, et lorsque la barre de défilement revient à sa position d'origine, elle s'arrêtera là.
De nombreuses personnes sur Internet doivent citer un plug-in jquery, ce qui semble très gênant.
Comment écrire un tel effet ?

Écrivez une idée approximative. Cela doit être plus compliqué de déboguer par vous-même que de référencer directement le plug-in jQuery, donc tout le monde utilisera le plug-in l'un après l'autre

Utilisez le événement onscroll pour déterminer la position de défilement de l'utilisateur, et utiliser le offsetTop de l'élément de menu L'attribut détermine sa position d'affichage

Si le menu défile vers le haut, changez l'affichage du menu en fixe

Lorsque le menu suivant défile jusqu'à une position appropriée, modifiez l'affichage du menu d'origine. Changez l'affichage et changez le nouveau menu en fixe

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'exemple de code pour les types d'objets (ensembles) dans Javascript ES6Article suivant：Explication détaillée de l'exemple de code pour les types d'objets (ensembles) dans Javascript ES6

Articles Liés

Voir plus