实现直播间消息评论滚动,顶部消失
竟然一句代码就解决了
-webkit-mask-image: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 15%,rgba(255,255,255,1) 100%);
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>使用Javascript实现文字信息间歇性滚动滚动</title><style type="text/css">*{margin:0;padding:0;}.box{width:375px;height:750px;margin:100px auto;border:1px solid #000;border-radius:20px;box-shadow:5px 5px 10px #333;background: url("./bg.jpg") no-repeat;overflow:hidden;position: relative;}.content{height:300px;overflow:hidden;position: absolute;bottom: 50px;left: 0;width: 100%;opacity: .5;-webkit-mask-image: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 15%,rgba(255,255,255,1) 100%);}ul li{list-style:none;height:40px;vertical-align: middle;text-align:left;background:rgba(0,0,0,0.5);width: calc(70% - 30px);margin-left: 20px;font-size:14px;margin-bottom: 10px;border-radius: 8px;padding: 0 10px;box-sizing: border-box;color: white;}.xuanfu {height: 10px;z-index: 9999;width: calc(70% - 30px);margin-left: 20px;position: absolute;bottom: 340px;opacity: .5;/*background-color: rgba(255,255,255,.6);*//*-webkit-mask-image: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 15%,rgba(255,255,255,1) 100%);*/ /*!*background-image: linear-gradient(transparent);*!*/ /*!*-webkit-mask: linear-gradient(to right, #000, transparent);*!*/ /*left: 0;*/ }</style> </head> <body> <div class="box"><div class="xuanfu"></div><div class="content" id="content"><ul class="msg1" id="msg1"><li>考生走路甩手误将准考证扔河里</li><li>20余省公务员省考笔试放榜</li><li>辟谷减肥：“大师”称意念发功可治病</li><li>2017公务员考试34万人报名 </li><li>钢票网与恒丰银行正式签订</li><li>男子送交警“胡乱作为 以权谋私”锦旗 被拘5日</li><li>美国会表决通过新驻华大使 月底有望赴华</li><li>英国曼彻斯特发生爆炸 事发地正举行演唱会</li><li>上海一家三口住9平米房间27年 儿子踩冰箱上床</li><li>女讲师称女孩最好嫁妆是贞操:没人愿娶堕过胎的</li><li>考生走路甩手误将准考证扔河里 消防员跳河打捞</li><li>20余省公务员省考笔试放榜 作弊者特别惨</li><li>辟谷减肥：“大师”称意念发功可治病</li><li>2017公务员考试34万人报名 平均24人抢1个职位</li><li>钢票网与恒丰银行正式签订资金存管协议</li><li>男子送交警“胡乱作为 以权谋私”锦旗 被拘5日</li><li>美国会表决通过新驻华大使 月底有望赴华</li><li>英国曼彻斯特发生爆炸 事发地正举行演唱会</li><li>上海一家三口住9平米房间27年 儿子踩冰箱上床</li><li>女讲师称女孩最好嫁妆是贞操:没人愿娶堕过胎的</li><li>考生走路甩手误将准考证扔河里 消防员跳河打捞</li><li>20余省公务员省考笔试放榜 作弊者特别惨</li><li>辟谷减肥：“大师”称意念发功可治病</li><li>2017公务员考试34万人报名 平均24人抢1个职位</li><li>钢票网与恒丰银行正式签订资金存管协议</li><li>男子送交警“胡乱作为 以权谋私”锦旗 被拘5日</li><li>美国会表决通过新驻华大使 月底有望赴华</li><li>英国曼彻斯特发生爆炸 事发地正举行演唱会</li><li>上海一家三口住9平米房间27年 儿子踩冰箱上床</li><li>女讲师称女孩最好嫁妆是贞操:没人愿娶堕过胎的</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 = 50;//滚动的速度 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>
https://www.cnblogs.com/zhang-jiao/p/12896867.html
https://segmentfault.com/q/1010000037755319?utm_source=tag-newest
