实现直播间消息评论滚动,顶部消失
竟然一句代码就解决了
-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
标签：滚动,bottom,顶部,content,rgba,scrollTop,var,直播间,255 From： https://www.cnblogs.com/fps2tao/p/18625155