Question

因此，在html5中不推荐使用marquee。我已经编写了新闻标题的代码，它应该首先从头条新闻开始，然后慢慢向上滚动。一旦最后的消息消失，第一个消息应该附加到最后一个消息，并且看起来像一个连续的流。这应该连续迭代。目前我的代码从空白div开始，新闻从底部开始涌入。最新消息和第一个新闻标题之间存在差距。我怎样才能做到这一点？： -

以下是代码段：

＆＃13;

#mid_section_2{
      
      border-top:3px solid black;
      border-bottom:3px solid black;
      border-right:1px dotted black;
      border-left:1px dotted black;
      background-color:white;
      overflow:hidden;
      height:200px;
     }

#mid_section_2 h5{
      border:1px solid black;
    }
    
    
    #up{
      padding-top:100%;
      padding-left:5%;
      padding-right:5%;
      animation-name: myanimate;
      animation-duration: 10s;
      animation-iteration-count: infinite;
      animation-timing-function:linear;
    }
    
    @keyframes myanimate{
      from{transform:translate(0,0)}
      to{transform:translate(0,-100%)}
    }

＆＃13;

<div id="mid_section_2">
        <div id="up">
          <a href="#"><h6>EU officials sees end of the road for diesel cars.</h6></a>
          <h6>Tata expects combined sales output of 850,000 units by next FY.</h6>
          <h6>Maruti Dzire AMT accounts for 17% of total sales.</h6>
          <h6>EESL to roll out 1,000 electric cars to Maharashtra government</h6>
          <h6>Tata expects combined sales output of 850,000 units by next FY.</h6>
          <h6>Maruti Dzire AMT accounts for 17% of total sales.</h6>
          <h6>EESL to roll out 1,000 electric cars to Maharashtra government</h6>
          
        </div>
      </div>

＆＃13;

Answer 1

试试这个

$(function(){
  var tickerLength = $('.container ul li').length;
  var tickerHeight = $('.container ul li').outerHeight();
  $('.container ul li:last-child').prependTo('.container ul');
  $('.container ul').css('marginTop',-tickerHeight);
  function moveTop(){
    $('.container ul').animate({
      top : -tickerHeight
    },600, function(){
     $('.container ul li:first-child').appendTo('.container ul');
      $('.container ul').css('top','');
    });
   }
  setInterval( function(){
    moveTop();
  }, 3000);
  });

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  font-family:'tahoma', serif;
}
.container{
  width:260px;
  margin:20px auto;
  height:300px;
  background-color:#333;
  overflow:hidden;
}
ul{
  list-style:none;
  position:relative;
}
li{
  height:100px;
  background-color:rgba(57, 173, 117,0.3);
   text-align:center;
  border-bottom:1px solid #333;
}
h2{
  color:#fff;
  padding-top:10px;
}
p{
  text-align:left;
  padding:10px;
  color:#eee;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li>
      <h2>Head line 1</h2>
      <p>News detail just a line jhghdsbd hsdssdhjhdjshdjsahdjs</p>
    </li>
    <li>
      <h2>Head line 2</h2>
      <p>News detail just a line jhghdsbd hsdssdhjhdjshdjsahdjs</p>
    </li>
    <li>
      <h2>Head line 3</h2>
      <p>News detail just a line jhghdsbd hsdssdhjhdjshdjsahdjs</p>
    </li>
    <li>
      <h2>Head line 4</h2>
      <p>News detail just a line jhghdsbd hsdssdhjhdjshdjsahdjs</p>
    </li>
   
    
  </ul>
</div>

css3新闻头条自动向上滚动

1 个答案: