1、html
<div id="demo">
<div id="indemo">
<div id="demo1">
文章标题1文章标题2文章标题3文章标题4文章标 feawfaw efaw feawfawe faw ef
</div>
<div id="demo2"></div>
</div>
</div>
2、CSS
#demo {
overflow: hidden;
height: .35rem;
margin-left: .2rem;
}
#indemo {
width: 800%;
}
#demo1 {
display: inline-block;
}
#demo2 {
display: inline-block;
}
3、js
//文字横向滚动
var speed = 30;
var tab = document.getElementById("demo");
var tab1 = document.getElementById("demo1");
var tab2 = document.getElementById("demo2");
tab2.innerHTML = tab1.innerHTML;
function Marquee() {
if (tab2.offsetWidth - tab.scrollLeft <= 0)
tab.scrollLeft -= tab1.offsetWidth
else {
tab.scrollLeft++;
}
}
var MyMar = setInterval(Marquee, speed);
// tab.onmouseover = function () {
// clearInterval(MyMar)
// };
// tab.onmouseout = function () {
// MyMar = setInterval(Marquee, speed)
// };
已适配UC浏览器。。。UC真tm大坑