前言
最近在搞弹幕的问题,小程序上的和vue上的,不想使用插件,于是自己摸索了一下,其实包括 2中弹幕形式 有序和无序的
直接上代码吧
<!-- 弹幕 --> <template v-if=" barrageData.newsRocket.length > 0 "> <!-- 'animation-duration':6+'s','animation-delay': item.delay+'s' --> <div class="rocket barrage-wrapper" v-show=" barrageData.isBarrage "> <div class="barrage-context barrageTop" :style="{top:0.8+'rem', 'animation-duration': barrageData.barrageTop.length > 1 ? barrageData.barrageTop.length * 4 +'s':'4s', barrageData.barrageTop.length > 1?'':'120%'}" > <div class="display-list" v-for="(item,index) in barrageData.barrageTop" :key="'br'+index"> <div> <img class="reImg" :src="item.avatar"> </div> <div class="barrage-text" v-html="item.desc"></div> </div> </div> </div> <div class="rocket barrage-wrapper" v-show="barrageData.isBarrage"> <div class="barrage-context barrageBottom" :style="{top:1.8+'rem', 'animation-duration': barrageData.barrageBottom.length > 1? barrageData.barrageTop.length*5+'s':'4s', barrageData.barrageBottom.length > 1?'':'120%'}" > <div class="display-list" v-for="(item,index) in barrageData.barrageBottom" :key="'br'+index"> <div> <img class="reImg" :src="item.avatar"> </div> <div class="barrage-text" v-html="item.desc"></div> </div> </div> </div> </template> <template v-else> <div class="no-barrage" v-show=" activityData.register ">{{ barrageData.friendsDesc }}</div> </template>
css
// 弹幕 .barrage-wrapper { position: fixed; height: 0.7rem; width: 7.5rem; white-space: nowrap; text-overflow: clip; .barrage-context { display: flex; justify-content: space-around; // width: 100%; height: 0.7rem; left: 100%; visibility: hidden; // overflow: hidden; position: absolute; } .display-list { display: flex; justify-content: space-around; align-items: center; height: 0.7rem; // position: absolute; // left: 0%; // visibility: hidden; color: #fff; margin-right: 1.1rem; } img { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #141540; border: 0.04rem solid rgba(255, 255, 255, 0.7); position: relative; } .barrage-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(0, 0, 0, 0.6); white-space: nowrap; margin: 0 -0.5rem; height: 0.64rem; line-height: 0.64rem; padding: 0 0.7rem; font-size: 0.24rem; border-top-right-radius: 0.45rem; border-bottom-right-radius: 0.45rem; } }
动画化的css
js 来判断他是 一条代码还是多条 代码来判断他的宽度是
再根据 css 来根据
@keyframes barrage { from { //left: 100%; visibility: visible; transform: translateX(0); } 100% { //left: 0%; visibility: hidden; transform: translateX(-180%); } } @keyframes barrageBottom { from { visibility: visible; transform: translateX(0); } 100% { visibility: hidden; transform: translateX(-180%); } }
visibility: hidden; 这个字段来判读弹幕在滚动到另一端的地方,消失,不至于弹幕卡主住那边
用 left 的话就是判断她是无序的代码, 下一条会比上一条快
用 transform: translateX(0); 就是有序代码 ,不会跑到前面
这样弹幕就完成了