js文字滚动功能

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" /> <meta http-equiv= "X-UA-Compatible" content= "IE=edge" /> <meta name= "viewport" content= "width=device-width, initial-scale=1.0" /> <title>文字滚动效果</title> <style> * { padding: 0; margin: 0; } body { display: flex; justify-content: center; align-items: center; height: 100vh; } .content { position: relative; width: 200px; height: 30px; background-color: aquamarine; overflow: hidden; } .word { position: absolute; left: 20px; height: 30px; line-height: 30px; white-space: nowrap; } </style> </head> <body> <div class = "content" > <div class = "word" > 文字滚动效果文字滚动效果文字滚动效果文字滚动效果文字滚动效果文字滚动效果文字滚动效果 </div> </div> <script> var content = document.querySelector( ".content" ); var word = document.querySelector( ".word" ); var contentWidth = content.clientWidth; var wordWidth = word.scrollWidth + 10; if (contentWidth < wordWidth) { setInterval(() => { if (-word.offsetLeft < wordWidth) { word.style.left = word.offsetLeft - 1 + "px" ; } else { word.style.left = "200px" ; } }, 20); } </script> </body> </html> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
2022-03-29 vscode-settings配置