搜尋

首頁  >  問答  >  主體

javascript - js常見的新聞連續滾動

為什麼這裡滾動不連續呢

<!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>  
我想大声告诉你我想大声告诉你2748 天前608

全部回覆(3)我來回復

  • 世界只因有你

    世界只因有你2017-05-19 10:42:12

    為了看著更直覺。 。我加幾個css屬性

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

    然後說下不能連續滾動的原因:

    因為你的offsetTop用錯了

    offsetTop是值目前元素距離offsetParent指定的元素的上側相對距離。 。你這裡就是指marqueecont這個元素,但是如果offsetParent沒指定,那麼marqueecont.offsetTop就是marqueecont和最外層body的上側相對距離

    所以此時marqueecont.offsetTop為100(如果按我加了邊框就是102),因為你最上面的頂了個100高的p...

    實際你需要完整滾動完一個marqueecont的高度是189...滾動100你就歸0了,自然不連續了。 。

    修改要直接看正常效果就是:

    if(marqueecont.offsetHeight<=marquee.scrollTop)

    最後你HTML結構最上面的p太多餘。 。 if改為上面那樣後可以最上面的100高的p刪除

    回覆
    0
  • PHP中文网

    PHP中文网2017-05-19 10:42:12

    代碼太長, 能把現象錄製一個gif圖嗎?

    回覆
    0
  • 大家讲道理

    大家讲道理2017-05-19 10:42:12

    建議去看看這篇 http://www.cnblogs.com/seven_...
    這幾個高度是有點不好理解,只是因為太相似[淚]

    回覆
    0
  • 取消回覆