<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>文字滚动</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 12px/1 '微软雅黑';
}
.wrap {
border: 1px solid #000;
font-size: 14px;
color: #333;
padding: 5px;
white-space: nowrap;
overflow: hidden;
width: 300px;
}
.box {
width: 1000px;
overflow: hidden;
}
.box p {
display: inline-block;
}
</style>
</head>
<body>
<!-- 滚动容器 -->
<div id="wrap" class="wrap">
<div class="box">
<p class="txt">高先生的猫，高先生的猫，高先生的猫，高先生的猫，高先生的猫，高先生的猫，高先生的猫，高先生的猫，高先生的猫，高先生的猫，</p>
</div>
</div>
<script>
let wrap = document.getElementById('wrap');
let box = wrap.getElementsByTagName('div')[0];
let p = document.getElementsByTagName('p')[0];
let p_w = p.offsetWidth;
let wrap_w = wrap.offsetWidth;
window.onload = function fun() {
if (wrap_w > p_w) { return false; }
box.innerHTML += box.innerHTML;
setTimeout("fun1()", 50);
}
function fun1() {
if (p_w > wrap.scrollLeft) {
wrap.scrollLeft++;
setTimeout("fun1()", 15); // 越小越快
}
else {
setTimeout("fun2()", 50);
}
}
function fun2() {
wrap.scrollLeft = 0;
fun1();
}
</script>
</body>
</html>