<!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> I was first paragraph </ li>
<li> I am the second paragraph of the text </ li>
<li> I'm writing the third paragraph </ li>
<li> I was fourth paragraph text </ li>
<li> I was in the fifth paragraph of text </ li>
<li> I was the sixth paragraph of text </ li>
<li> I was the seventh paragraph of text </ li>
</ ul>
</ div>
<script>
$(function() {
var $this = $(".scroll");
var scrollTimer;
$this.hover(function() {
clearInterval(scrollTimer);
}, function() {
scrollTimer = setInterval(function() {
scrollContent($this);
}, 2000);
}).trigger("mouseout");
});
scrollContent function (obj) {
var $ = Self obj.find ( "UL: First");
var = $ self.find the lineHeight. ( "Li: First") height (); // get the line high
$ self.animate ( {
"margin-Top": -lineHeight + "PX"
}, 1000, function () {
$ self.css ({
"margin-Top": "0px"
}) Find.. ( "Li: First") the appendTo ( $ self); // appendTo movable element directly, rather than copying, the change in position of the elements appendto
})
}
</ Script>
</body>
</html>
