新闻滚动

Posted mudeng007

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了新闻滚动相关的知识,希望对你有一定的参考价值。

   --------------------->   -------------------->  

 

  1. 获取第一个元素,appendTo到结构中
  2. setInterval每timer秒执行上个操作
  3. 鼠标移入清除 clearInterval
.myDiv{height:200px;overflow:hidden;}
li{height:50px;line-height:50px;}
<div class="myDiv">
  <ul>
    <li>000</li>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li> . . . </li>
  </ul>
</div>
<script>
var myDiv=$(".myDiv");
var countDown=1000;
var timer;
myDiv.hover(function(){
  clearInterval(timer);
},function(){
  timer=setInterval(function(){
    var first=myDiv.find("li:first");
      var lineHeight=first.height(); 
    first.animate({marginTop:-lineHeight+"px"},500,function(){
      first.appendTo("ul").css({marginTop:0});
    })
  },countDown)
}).trigger("mouseleave");//页面载入默认执行
</script>

 

以上是关于新闻滚动的主要内容,如果未能解决你的问题,请参考以下文章