<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.renav
{
width: 200px;
height: 150px;
overFlow: hidden;
}
.renav li
{
height: 21px;
border-bottom: solid 1px blue;
list-style-type: none
}
</style>
</head>
<body>
<div class="renav">
<ul>
<li>叶洛洛</li>
<li>西瓜</li>
<li>排骨</li>
<li>王胖子</li>
<li>满汉全席</li>
<li>成都市</li>
<li>破卡普空</li>
<li>你觉得</li>
<li>叶洛洛</li>
<li>西瓜</li>
<li>排骨</li>
<li>王胖子</li>
<li>满汉</li>
<li>计算机</li>
<li>c++</li>
<li>java</li>
<li>php</li>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function scrollNews(obj){
var $self=obj.find("ul:first")
var lineHeight=$self.find("li:first").height()
$self.animate({"margin-top":-lineHeight+"px"},600,function(){
$self.css({"margin-top":"0px"}.find("li:first").appendTo($self))
})
}
$(function(){
var $this=$(".renav")
var scrollTimer;
$this.hover(function(){
clearInterval(scrollTimer)
},function(){
scrollTimer=setInterval(function(){
scrollNews($this)
},2000)
}).trigger("mouseout")
})
</script>
</body>
</html>
Royal丶Cs
子闻
昵称什么DE
相关分类