<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文字上下滚动</title>
<style>
#rollBox{
overflow: hidden;
height: 180px;
}
#roll1{
position: relative;
margin: 0;
}
li{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="">
<div class="" id="rollBox">
<ul id="roll1" class="">
<li class="">
<span>q****4 5****万元1</span>
</li>
<li class="">
<span>q****4 5****万元2</span>
</li>
<li class="">
<span>q****4 5****万元3</span>
</li>
<li class="">
<span>q****4 5****万元4</span>
</li>
<li class="">
<span>q****4 5****万元5</span>
</li>
<li class="">
<span>q****4 5****万元6</span>
</li>
<li class="">
<span>q****4 5****万元7</span>
</li>
<li class="">
<span>q****4 5****万元8</span>
</li>
</ul>
</div>
</div>
</body>
<script src="http://i0.jrjimg.cn/zqt-red-1000/focus/common/js/jquery-1.7.2.min.js"></script>
<script>
//文字列表滚动
function scollDown(id,time){
var time=time||1000;
var elList = $("#"+id).children().length
var marginBottom = parseInt($("#"+id+" li:last").css("margin-bottom"))
var elHight = $("#"+id).height()
if(!isNaN(marginBottom)){
elHight+=marginBottom
}
// 每个的高度
var itemHight = elHight/elList
console.log(itemHight,elList,)
if(elList<=5) return
console.log($("#"+id+" li:first").height())
setInterval(function(){
$("#"+id).animate({'top':-itemHight+'px'},1000,function(){
$("#"+id+" li:first").appendTo($("#"+id));
$("#"+id).css('top',0);
})
},time);
}
scollDown("roll1",3000);
</script>
</html>
