示例演示:
1.创建div
<div class="main_itemR2">
<div class="itemR2 hflex" id="alarmSort">
<div class="announce-list scroll-list"></div>
</div>
</div>
2.遍历生成数据
var flag = 1;
$(function () {
getAlarmSort()
})
function getAlarmSort() {
var list=[
{
alarmClass:'A',
time:'2022/03/31 13:52',
place:'xxxxx',
type:'xxxxx'
},{
alarmClass:'B',
time:'2022/03/31 13:52',
place:'xxxxx',
type:'xxxxx'
},{
alarmClass:'C',
time:'2022/03/31 13:52',
place:'xxxxx室',
type:'xxxxx'
},{
alarmClass:'D',
time:'2022/03/31 13:52',
place:'xxxxx',
type:'xxxxx'
},{
alarmClass:'D',
time:'2022/03/31 13:52',
place:'xxxxx',
type:'xxxxx'
},{
alarmClass:'A',
time:'2022/03/31 13:52',
place:'xxxxx',
type:'xxxxx'
},{
alarmClass:'A',
time:'2022/03/31 13:52',
place:'xxxxx',
type:'xxxxx'
},{
alarmClass:'D',
time:'2022/03/31 13:52',
place:'xxxxx',
type:'xxxxx'
}
]
var imgSrc,color
let _str = '';
for (var k in list) {
if(list[k].alarmClass == 'A'){
imgSrc="image/sides/security/sortA.png"
color='#ff2929'
}else if(list[k].alarmClass == 'B'){
imgSrc="image/sides/security/sortB.png"
color='#ff4c29'
}else if(list[k].alarmClass == 'C'){
imgSrc="image/sides/security/sortC.png"
color='#ff8929'
}else if(list[k].alarmClass == 'D'){
imgSrc="image/sides/security/sortD.png"
color='#ffe329'
}
_str += '<div class="announce-item scroll-item hflex acenter jbetween">' +
' <div class="item-center hflex acenter"> ' +
'<div class="time">'+ list[k].time+'</div> ' +
'<div class="rmark hflex"> <div class="place">'+list[k].place+'</div> <div class="type">'+list[k].type+'</div> </div> </div> ' +
'<div class="item-right rflex">' +
' <div class="item-right_img"><img src="'+imgSrc+'" alt=""></div> ' +
'</div>' +
'</div>'
}
$("#alarmSort>.announce-list").html(_str);
if(flag === 1){
flag = 0
$('#alarmSort').myScroll({
speed: 60 //数值越大,速度越慢
});
}
}
3.css
.main_itemR2{
width: 24vw;
height: 10vh;
margin-top: 7vh;
margin-left: 14vw;
overflow: hidden;
box-sizing: border-box;
}
.main_itemR2 .itemR2{
width: 100%;
height: 100%;
}
.itemR2 .announce-list {
width: 100%;
height: 12vh;
margin-top: 1vh;
}
.announce-list .announce-item {
width: 100%;
height: 4vh;
color: #fff;
font-size: 1.3vh;
}
.announce-item .item-center{
width:20vw;
height: 4vh;
}
.announce-item .item-center .time{
width: 8vw;
height: 4vh;
font-size: 13px;
}
.announce-item .item-center .rmark{
width: 12vw;
height: 4vh;
font-size: 13px;
}
.announce-item .item-center .rmark .type{
margin-left: 2vw;
color: #55e1ec;
}
.announce-item .item-right{
width: 4vw;
height: 4vh;
}
.announce-item .item-right .item-right_img{
margin-top: 0;
height: 2vh;
}
.announce-item .item-right img{
height: 100%;
}
详细资源如下