Html5+css3+js完成⽆缝跑马灯
HTML 部分
Document欢迎您，只有努⼒奋⽃
欢迎您，只有努⼒奋⽃才会有美好的未来,哈哈哈哈。
欢迎您，只有努⼒奋⽃才会有美好的未来,哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈哈哈。
Css部分
.marquee-left {
float: left;height: 30px;
will-change: transform;
will-change: -webkit-transform;line-height: 30px;}
@-webkit-keyframes marquee-left-animate {0% {
-webkit-transform: translate3d(0, 0, 0);}
100% {
-webkit-transform: translate3d(-50%, 0, 0);}}
Js部分
//divId必须为dom元素function Roll(divId) {
var str = divId.innerHTMLvar time = (leng(str)) / 6 + \"s\"
//中⽂字符为2个长度，英⽂为1个，按需判断
if (leng(str) > 30) divId.style.cssText = \"overflow: hidden; text-overflow: ellipsis;white-space: nowrap; width: 240px;\"else return
divId.onmouseenter = function () {
divId.innerHTML = `
${str}${str}
`}
divId.onmouseleave = function () {divId.innerHTML = str;}}
function leng (str) {
return str.replace(/[\Α-\￥]/g, \"aa\").length; //先把中⽂替换成两个字节的英⽂，在计算长度};
效果基本就是，当你字符超过你设置的字符长度时，⾸先⽤css的⽅法⽤省略号代替超出部分，当你⿏标悬浮时，通过字符长度来定义滚动的时间，可⾃⼰设置。对你有所帮助或者有地⽅不对的，请及时评论哈，谢谢