实现直播间消息评论滚动,顶部消失

竟然一句代码就解决了

-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

https://juejin.cn/post/6888488657372594183

posted @ 2024-12-23 22:04 与f 阅读(43) 评论(0) 收藏举报

刷新页面返回顶部

与f

实现直播间消息评论滚动,顶部消失

公告