<div class="mainWrap">
<p>· 获奖名单 ·</p>
<div class="mainTitle">
<div class="main_time">时间</div>
<div class="main_money">¥</div>
<div class="main_phone">id</div>
<div class="main_nickname">用户</div>
</div>
<div class="main">
<ul></ul>
</div>
</div>
var oUl = document.getElementsByTagName("ul")[0];
var speed = 0;
$.submit({
type: "get",
url: "lotteryRecord/query",
func: function (res) {
var resArr = res.records;
var strLi = ''
$.each(resArr, function (index, value) {
strLi += ' <li><div class="main_time">' +
formatDate(value.hitTime) +
'</div><div class="main_money">' + value.price +
'</div><div class="main_phone">' + value.userId +
'</div><div class="main_nickname"><img src="' +
value.avatar + '" alt=""><span>' + formatName(value.nickname)
+'</span></div></li>'
});
$('.main ul').append(strLi)
timer = setInterval(function () {
moveImg(-$(".main ul").height()+130, 0)//130为main的高度
}, 60)
}
})
//运动函数
function moveImg(iTarget, value) {
if (iTarget > value) {
speed = 1
} else {
speed = -1
}
if (oUl.offsetTop === iTarget) {
oUl.style.top = value;
} else {
oUl.style.top = oUl.offsetTop + speed + "px"
}
}
.mainWrap {
width: 576px;
height: 264px;
border-radius: 30px;
margin: auto;
background: url(../images/name.png) no-repeat center center;
background-size: contain;
color: red
}
.mainWrap p {
text-align: center;
font-size: 36px;
font-weight: bold;
padding: 10px 0 4px;
}
.mainTitle {
overflow: hidden;
}
.mainTitle div {
font-size: 24px;
float: left;
padding: 6px 0px 6px 18px;
box-sizing: border-box
}
.main {
height: 130px;
position: relative;//必须定位
overflow: hidden;
}
.main ul {
position: absolute;//必须定位
left: 0;
top: 0;
}
.main li {
overflow: hidden;
padding: 4px 0px 4px 18px;
box-sizing: border-box;
line-height: 44px
}
.main li>div {
float: left;
font-size: 24px;
}
.main_time {
width: 144px;
}
.main_money {
width: 98px;
}
.main_phone {
width: 170px;
}
.main_nickname {
width: 110px;
}
.main_nickname img {
float: left;
margin-right: 6px;
width: 30px;
height: 30px;
border-radius: 50%;
vertical-align: middle
}