<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实现文字向上滚动的效果-jq22.com</title>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
* {
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>我是第一段文字</li>
<li>我是第二段文字</li>
<li>我是第三段文字</li>
<li>我是第四段文字</li>
<li>我是第五段文字</li>
<li>我是第六段文字</li>
<li>我是第七段文字</li>
</ul>
</div>
<script>
$(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>
</body>
</html>
