script代码
//文本滚动
function startmarquee(lh, speed, delay, index) {
var t;
var p = false;
var o = document.getElementById("marqueebox" + index);
o.innerHTML += o.innerHTML;
o.οnmοuseοver = function () { p = true }
o.οnmοuseοut = function () { p = false }
o.scrollTop = 0;
function start() {
t = setInterval(scrolling, speed);
if (!p) { o.scrollTop += 1; }
}
function scrolling() {
if (o.scrollTop % lh != 0) {
o.scrollTop += 1;
if (o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0;
} else {
clearInterval(t);
setTimeout(start, delay);
}
}
setTimeout(start, delay);
}
//第一个为高度,第二个为速度,第三个为时间,第四个为名字
startmarquee(25, 20, 2500, 0);
//文本滚动end
script代码:利用JQuery渲染数据
引入JS
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
var daya=[
{
tes:"第一行"
},
{
tes:"第二行"
},
{
tes:"第三行"
},
{
tes:"第四行"
},
{
tes:"第五行"
},
]
let data = daya
var items = ''
for (let i = 0; i < data.length; i++) {
items += `
<li>${data[i].tes}</li>
`
}
$('.fortext').append(items)
style代码
.notice {
width: 80%;
border-radius: 0.5rem;
background-color: lightgray;
margin: 1rem auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.notice_imgone {
width: 1rem;
height: 1rem;
margin-left: 0.4rem;
}
.notice_p {
margin: auto;
}
.notice_imgtwo {
width: 1.5rem;
height: 1.5rem;
}
.textbox {
width: 150px;
height: 1.56rem;
line-height: 1.56rem;
overflow: hidden;
}
.textbox ul {
margin: 0;
padding: 0
}
.textbox ul li {
height: 1.56rem;
line-height: 1.56rem;
font-size: 12px;
text-align: center;
list-style-type: none;
}
html代码
<!-- 我是通知栏 -->
<div class="notice">
<img class="notice_img" src="https://sucai.suoluomei.cn/sucai_zs/images/20191123100705-notice%20.png">
<div class="textbox" id="marqueebox0">
<ul id="fortext" class="fortext">
</ul>
</div>
<img class="notice_img1" src="https://sucai.suoluomei.cn/sucai_zs/images/20191121093423-hdjhskj.png">
</div>
<!-- 我是通知栏 end -->
效果图(如果不想要通知栏效果,只需要文字就复制class=textbox的div即可)
源码(可直接复制到页面使用)
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>文本滚动</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
.box {
width: 80%;
height: 1.56rem;
line-height: 1.56rem;
overflow: hidden;
}
.box ul {
margin: 0;
padding: 0
}
.box ul li {
height: 1.56rem;
line-height: 1.56rem;
font-size: 12px;
text-align: center;
list-style-type: none;
}
</style>
</head>
<body>
<div class="box" id="marqueebox0">
<ul>
<li style="background:#f8e2ac;">第一行</li>
<li style="background:#f5f5f5;">第二行</li>
<li style="background:#ffe6ec;">第三行</li>
</ul>
</div>
<br />
<div class="box" id="marqueebox1">
<ul>
<li style="background:#f8e2ac;">第一行</li>
<li style="background:#f5f5f5;">第二行</li>
<li style="background:#ffe6ec;">第三行</li>
</ul>
</div>
<script type="text/javascript">
function startmarquee(lh, speed, delay, index) {
var t;
var p = false;
var o = document.getElementById("marqueebox" + index);
o.innerHTML += o.innerHTML;
o.οnmοuseοver = function () { p = true }
o.οnmοuseοut = function () { p = false }
o.scrollTop = 0;
function start() {
t = setInterval(scrolling, speed);
if (!p) { o.scrollTop += 1; }
}
function scrolling() {
if (o.scrollTop % lh != 0) {
o.scrollTop += 1;
if (o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0;
} else {
clearInterval(t);
setTimeout(start, delay);
}
}
setTimeout(start, delay);
}//第二个为速度,第三个为时间,第四个为下标
startmarquee(25, 30, 3000, 0);
startmarquee(25, 40, 0, 1);
</script>
</body>
</html>