需引入 jquery.min.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
<title>单行滚动demo</title>
<style type="text/css">
@media screen and (min-width: 320px) {
html{
font-size: 13.65px;
}
}
@media screen and (min-width: 375px) {
html{
font-size: 16px;
}
}
ul, li {
margin:0;
padding:0;
}
#scrollDiv, #scrollDiv1 {
width: 12.5rem;
height: 2rem;
line-height: 2rem;
border: #ccc 1px solid;
overflow: hidden;
}
#scrollDiv li, #scrollDiv1 li {
height:2rem;
}
</style>
</head>
<body>
<div id="scrollDiv">
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
</div>
<div id="scrollDiv1">
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
function AutoScroll(obj){
$(obj).find("ul:first").animate({
marginTop:"-2rem"
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
});
}
$(document).ready(function(){
//li多于1个才执行动画函数
setInterval('AutoScroll("#scrollDiv")', 1000); //1秒滚动一行
setInterval('AutoScroll("#scrollDiv1")', 2600); //2.6秒滚动一行
});
</script>
</body>
</html>