您的位置：首页 > Web前端 > JQuery

jquery实现循环向上滚动

2016-01-12 12:44 676 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动</title>
<script type="text/javascript" src="../js/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
$(function(){
var $this = $(".scroll");
var scrollTimer;
$this.hover(function(){
clearInterval(scrollTimer);
},function(){
scrollTimer = setInterval(function(){
scrollContent( $this );
},2000 );
}).trigger("mouseout");
});
function scrollContent(obj){
var $self = obj.find("ul:first");
var lineHeight = $self.find("li:first").height(); //获取行高
$self.animate({ "margin-top" : -lineHeight +"px" },1000 , function(){
$self.css({"margin-top":"0px"}).find("li:first").appendTo($self); //appendTo能直接移动元素而不是复制，被appendto的元素位置发生变化
})
}
</script>
<style type="text/css">
*{
padding:0px;
margin: 0px;
}
.scroll ul li{
list-style:none;
}
.scroll {
border:1px solid red;
width: 200px;
height: 80px;
line-height: 20px;
overflow: hidden;
background: #FFFFFF;
}
.scroll li {
height: 20px;
}
</style>
</head>
<body>
<div class="scroll">
<ul>
<li>aaaaaaaaaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbbbbbbbbb</li>
<li>ccccccccccccccccccccc</li>
<li>ddddddddddddddddddddd</li>
<li>eeeeeeeeeeeeeeeeeeeee</li>
<li>fffffffffffffffffffff</li>
<li>ggggggggggggggggggggg</li>
<li>hhhhhhhhhhhhhhhhhhhhh</li>
</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航