新闻滚动

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

 

  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>

 

posted @ 2017-12-06 19:44  mudeng007  阅读(130)  评论(0编辑  收藏  举报