你只需要吧 代碼復制過去，然后吧視頻地址替換成你的就可以看見效果了！
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>實現直播間消息評論滾動，頂部消失效果， 用瀏覽器的手機模式開打， 最好360瀏覽器可以自動播放</title> <style type="text/css"> *{margin:0;padding:0;} .box{ width:100%; height:100%; position: relative; } .content{ height: 40rem; overflow:hidden; position: absolute; bottom: 10rem; left: 0; width: 100%; -webkit-mask-image: -webkit-gradient(linear, 0 13%, 0 0, from(#fff), to(rgba(255, 255, 255, 0))); } ul li{ list-style:none;max-width: calc(70% - 6rem); margin-left: 3rem;margin-bottom: 1rem;box-sizing: border-box; } ul li div { font-size: 2.1rem; color: white; box-sizing: border-box; border-radius: 2rem; padding: .8rem 1.5rem; background:rgba(0,0,0,0.4); display: inline-block; } /*object-fit:fill;讓視頻撐滿整個容器高度*/ #plvideo {width: 100%;object-fit:fill;height: 100%;} </style> </head> <body> <div class="box"> <video src="./v1.mp4" autoplay="autoplay" loop="loop" id="plvideo"></video> <!--模擬消息區--> <div class="content" id="content"> <ul class="msg1" id="msg1"> <li><div>20余省公務員省考筆試放榜20余省公務員省考筆試放榜20員省考筆試放榜</div></li> <li><div>20余省公務員省考筆試放2省考筆試放榜20余省公務員省考筆試放榜榜</div></li> <li><div>辟谷減肥：“大師20余省公務員省考筆試放榜”稱意念發功可治病</div></li> <li><div>2017公務員考試34萬人20余省公務員省考筆試放榜報名</div></li> <li><div>鋼票網與恆豐銀行正式簽2公務員省考筆試放榜20余省公務員省考筆試放榜訂</div></li> <li><div>男子送交警“胡考筆試放榜20余省公務員省考筆試放榜”錦旗 被拘5日</div></li> <li><div>美國會表決底有望赴華</div></li> <li><div>英國曼徹斯特正舉行演唱會</div></li> <li><div>上海子踩冰箱上床</div></li> <li><div>女操過胎的</div></li> <li><div>考生走員跳河打撈</div></li> <li><div>20余員省者特別慘</div></li> <li><div>辟谷減肥：“功可治病</div></li> <li><div>2017公 平均24人搶1個職位</div></li> <li><div>鋼票網與恆存管協議</div></li> <li><div>男子送交警“胡亂作”錦旗 被拘5日</div></li> <li><div>美國會表決底有望赴華</div></li> <li><div>英國曼徹斯特正舉行演唱會</div></li> <li><div>上海子踩冰箱上床</div></li> <li><div>女操過胎的</div></li> <li><div>考生走員跳河打撈</div></li> <li><div>20余員省者特別慘</div></li> <li><div>辟谷減肥：“功可治病</div></li> <li><div>2017公 平均24人搶1個職位</div></li> <li><div>鋼票網與恆存管協議</div></li> <li><div>男子送交警“胡亂作”錦旗 被拘5日</div></li> </ul> <ul id="msg2"></ul> </div> </div> <script> // 消息滾動區的計算 var content=document.getElementById("content"); var msg1=document.getElementById("msg1"); var msg2=document.getElementById("msg2"); var liHeight = 50; var speed = 10;//滾動的速度 msg2.innerHTML=msg1.innerHTML; var delay = 10; var time; content.scrollTop=0; function startScroll(){ time = setInterval(upScroll,speed); content.scrollTop++; }; function upScroll(){ if(content.scrollTop % liHeight==0){ clearInterval(time); setTimeout(startScroll,delay); }else{ content.scrollTop++; if(content.scrollTop >= content.scrollHeight/2){ content.scrollTop =0; } } } setTimeout(startScroll,delay) </script> </body> </html>