实现直播间消息评论滚动，顶部消失效果
你只需要吧 代码复制过去，然后吧视频地址替换成你的就可以看见效果了！
<!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>
