<div class="wrap">
<div class="top-ad"></div>
</div>
<style>
* {
margin: 0px;
padding: 0px;
}
.wrap{
max-width:750px;
width:100%;
height:30px;
/* border:1px solid #3d3d3d; */
box-sizing: border-box;
position: absolute;
top:0px;
left:0px;
background: #000000;
opacity: 0.5;
display: flex;
align-items: center;
justify-content: center;
}
.top-ad {
width: 60%;
height: 20px;
border: 1px solid #ffffff;
box-sizing: border-box;
color:#ffffff;
margin-left:-40%;
/* background:green; */
animation: bounceInLeft 3s infinite;
}
@keyframes bounceInLeft {
0% {
transform: translate3d(-300px, 0, 0);
}
50% {
transform: translate3d(0px, 0, 0);
}
75% {
transform: translate3d(0px, 0, 0);
}
90% {
transform: translate3d(0px, 0, 0);
}
100% {
transform: none;
}
}
</style>
$(function () {
let objStr = [
'1大数据人工智能大数据人工智能1',
'2大数据人工智能大数据人工智能2',
'3大数据人工智能大数据人工智能3',
'4大数据人工智能大数据人工智能4',
'5大数据人工智能大数据人工智能5'
]
// 生成min和max之间的任意整数；
function randomNum(min, max) {
var num = Math.round(Math.random() * (max - min) + min);
return num;
}
// 将每次需要变化的数据放到该函数内
function fn() {
let len = objStr.length;
let index = randomNum(0, objStr.length - 1)
$(".top-ad").html(objStr[index])
}
fn()
let hasCutMess = setInterval(fn, 3000)
})
