js常见的新闻连续滚动

Question

Welcome To Ask or Share your Answers For Others

js常见的新闻连续滚动

posted Feb 6, 2021 in Technique[技术] by 深蓝 (71.8m points)

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>  
    <div style="height:100px"></div>

   <div id="marquee" style="overflow:hidden;height:120px;width:220px;margin-left:20px;">
      <div 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>
      </div>
          <div id='marqueecont2'></div>
      </div>
        
     <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>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-02-06T00:10:39+0000

为了看着更加直观。。我加几个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高的div...

实际你需要完整滚动完一个marqueecont的高度是189...滚动100你就归0了，自然不连续了。。

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

if(marqueecont.offsetHeight<=marquee.scrollTop)

最后你HTML结构最上面的DIV太多余。。if改为上面那样后可以最上面的100高的DIV删除

Categories

js常见的新闻连续滚动

js常见的新闻连续滚动

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags