新闻滚动

Posted 2020-10-16 mudeng007

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

 

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>