简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - js common news défilement continu
我想大声告诉你
我想大声告诉你 2017-05-19 10:40:12
0
3
560

Pourquoi le défilement ici est-il discontinu ? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>新闻滚动</title>
    <style>
        *{margin:0px;padding:0px}   
    </style>

  </head>  
  <body>  
    <p style="height:100px"></p>

   <p id="marquee" style="overflow:hidden;height:120px;width:220px;margin-left:20px;">
      <p id="marqueecont">
       <ul style="margin:0px;list-style:none;">
        <li>标题标题标题标题标题标题1</li>
        <li>标题标题标题标题标题标题2</li>
        <li>标题标题标题标题标题标题3</li>
        <li>标题标题标题标题标题标题4</li>
        <li>标题标题标题标题标题标题5</li>
        <li>标题标题标题标题标题标题6</li>
        <li>标题标题标题标题标题标题7</li>
        <li>标题标题标题标题标题标题8</li>
        <li>标题标题标题标题标题标题9</li>
        
      </ul>
      </p>
          <p id='marqueecont2'></p>
      </p>
        
     <script>
         var marquee = document.getElementById('marquee');
         var marqueecont = document.getElementById('marqueecont');
         var marqueecont2 = document.getElementById('marqueecont2');

         MarqTop(marquee,marqueecont,marqueecont2,30);

          function MarqTop(marquee,marqueecont,marqueecont2,speed){
            marqueecont2.innerHTML=marqueecont.innerHTML;
            
            // 用这个函数这个滚动不连续
            function Marquee(){
            if(marqueecont.offsetTop<=marquee.scrollTop)
               marquee.scrollTop-=marqueecont.offsetHeight;
            else{
              marquee.scrollTop++;
              }
            }
            
            // 这个滚动是连续的
            /*function Marquee(){ 
            if(marquee.scrollTop>=marqueecont.offsetHeight){
               marquee.scrollTop=0; 
            }else{
               marquee.scrollTop++;
              }
            }*/
            var MyMar=setInterval(Marquee,speed);
            marquee.onmouseover=function() {clearInterval(MyMar);}
            marquee.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
          }

       </script>  
  </body>  
</html>
我想大声告诉你
我想大声告诉你

répondre à tous(3)
世界只因有你
世界只因有你2017-05-19 10:42:12 3 plancher

Pour le rendre plus intuitif. . Je vais ajouter quelques attributs CSS

 #marquee {
    overflow: auto;/*为了直观的查看滚动量*/
    border: 2px solid;   
  }
  #marqueecont{
    border: 1px solid  #f55;
  }

Parlons ensuite de la raison pour laquelle le défilement continu n'est pas possible :

Parce que vous avez utilisé le mauvais offsetTop

offsetTop est la distance relative supérieure de l'élément spécifié par offsetParent par rapport à l'élément actuel. . Vous faites référence à l'élément marqueecont ici, mais si offsetParent n'est pas spécifié, alors marqueecont.offsetTop est la distance relative entre le côté supérieur de marqueecont et le corps le plus extérieur

Donc, à ce moment-là, marqueecont.offsetTop vaut 100 (si j'ajoute une bordure, ce sera 102), car vous avez un p de 100 en haut...

En fait, la hauteur dont vous avez besoin pour faire défiler complètement un marqueecont est de 189... Lorsque vous faites défiler 100, il reviendra à 0, ce qui est naturellement discontinu. .

Pour voir directement l'effet normal des modifications : 

if(marqueecont.offsetHeight<=marquee.scrollTop)

Finalement, le p en haut de votre structure HTML est trop redondant. . Après avoir modifié ce qui précède, les 100 premiers p peuvent être supprimés

Comme +0
Ajouter une réponse
Ty80
Ty802017-05-19 10:42:12 2 plancher

Le code est trop long, pouvez-vous enregistrer le phénomène en gif ?

Comme +0
Ajouter une réponse
大家讲道理
大家讲道理2017-05-19 10:42:12 1 plancher

Il est recommandé de jeter un œil à ce http://www.cnblogs.com/seven_...
Ces hauteurs sont un peu difficiles à comprendre, simplement parce qu'elles sont trop similaires [larmes]

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！