公告栏文本横向循环滚动
生活随笔
收集整理的這篇文章主要介紹了
公告栏文本横向循环滚动
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1 效果展示
2 動(dòng)畫實(shí)現(xiàn)
<!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>Document</title><style>*{margin: 0;padding: 0;}.wrap{padding: 20px;height: 30px;line-height: 30px;display: flex;background-color: pink;align-items: center;}.wrap .tip{font-weight: 700;font-size: 16px;}.wrap .content{flex: 1;height: 100%;border: 1px solid #888;font-size: 14px;overflow: hidden;}.wrap .content .text{/* 必須設(shè)置為行內(nèi)塊元素，讓元素寬度自動(dòng)撐開 */display: inline-block;padding-left: 100%;white-space: nowrap;animation: autoScroll 15s linear infinite;}@keyframes autoScroll{0%{transform: translateX(0);}100%{transform: translateX(-100%);}}</style> </head> <body><div class="wrap"><span class="tip">公告：</span><div class="content"><span class="text">（一）理論學(xué)習(xí)情況；（二）貫徹執(zhí)行黨的路線、方針、政策、國(guó)家法律法規(guī)的情況；（三）貫徹執(zhí)行民主集中制的情況；（四）履行崗位職責(zé)的情況(在工作中采取的方法措施、成績(jī)和經(jīng)驗(yàn))；（五）存在問題及今后努力方向。</span></div></div> </body> </html>3 js實(shí)現(xiàn)
<!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>Document</title><style>*{margin: 0;padding: 0;}.wrap{padding: 20px;height: 30px;line-height: 30px;display: flex;background-color: pink;align-items: center;}.wrap .tip{font-weight: 700;font-size: 16px;}.wrap .content{flex: 1;height: 100%;border: 1px solid #888;font-size: 14px;overflow: hidden;}.wrap .content .text{padding-left: 100%;padding-right: 100%;white-space: nowrap;}</style> </head> <body><div class="wrap"><span class="tip">公告：</span><div class="content"><span class="text">（一）理論學(xué)習(xí)情況；（二）貫徹執(zhí)行黨的路線、方針、政策、國(guó)家法律法規(guī)的情況；（三）貫徹執(zhí)行民主集中制的情況；（四）履行崗位職責(zé)的情況(在工作中采取的方法措施、成績(jī)和經(jīng)驗(yàn))；（五）存在問題及今后努力方向。</span></div></div><script>const content = document.querySelector('.content')const text = document.querySelector('.text')console.log(content.clientWidth, content.scrollWidth, text.offsetWidth)setInterval(() => {content.scrollLeft++if(content.clientWidth + content.scrollLeft >= /*content.scrollWidth*/text.offsetWidth){content.scrollLeft = 0}}, 20);</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的公告栏文本横向循环滚动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 期末了给孩子们一些鼓励吧！用Python
- 下一篇： 中科院计算机技术研究所张浩,中国科学院计