Html5+css3+js完成无缝跑马灯_html-js-css

概述Html5+css3+js完成无缝跑马灯效果 HTML 部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" Html5+css3+js完成无缝跑马灯效果

HTML 部分

<!DOCTYPE HTML> <HTML lang="en">
<head> <Meta charset="UTF-8"> <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Title>document</Title> <link rel="stylesheet" href="index.CSS"> <style> * { margin: 0px; padding: 0px; } #a1, #a2 { wIDth: 300px; height: 300px; overflow: hIDden; white-space: nowrap; } #a1 p, #a2 p { float: left; height: 30px; line-height: 30px; } </style> </head>
<body> <div ID="a1"> <p>欢迎您，只有努力奋斗</p> <p>欢迎您，只有努力奋斗才会有美好的未来,哈哈哈哈。</p> <p>欢迎您，只有努力奋斗才会有美好的未来,哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈哈哈。</p> </div>
<div ID="a2">
</div> </body> <script src="index.Js"></script> <script> var arrs = ["大神困了就大神了啊啊啊啊啊啊啊啊。","吖，那大家的撒娇单独，萨达撒旦教啊--","奥斯卡级大烧烤加--","卡机的撒娇的萨达哈。卡介绍的---"] for (let i = 0; i < arrs.length; i++) { document.querySelector("#a2").INNERHTML += ` <p>${arrs[i]}</p> ` } document.querySelectorAll("#a2 p").forEach(function (item) { Roll(item) }) var arr = document.querySelectorAll("#a1 p"); for (let i = 0; i < arr.length; i++) { Roll(arr[i]); }; </script> </HTML>
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); } 100% { -webkit-transform: translate3d(-50%,0); } } Js部分
//divID必须为dom元素 function Roll(divID) { var str = divID.INNERHTML var 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 = `<div ><span>${str}</span><span>${str}</span></div>` } divID.onmouseleave = function () { divID.INNERHTML = str; } } function leng (str) { return str.replace(/[\u0391-\uFFE5]/g,"aa").length; //先把中文替换成两个字节的英文，在计算长度 }; 效果基本就是，当你字符超过你设置的字符长度时，首先用CSS的方法用省略号代替超出部分，当你鼠标悬浮时，通过字符长度来定义滚动的时间，可自己设置。对你有所帮助或者有地方不对的，请及时评论哈，谢谢总结

以上是内存溢出为你收集整理的Html5+css3+js完成无缝跑马灯全部内容，希望文章能够帮你解决Html5+css3+js完成无缝跑马灯所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1065521.html