原生js写的斗鱼弹幕

苏打绿冰薄荷

于 2017-11-14 10:31:57 发布

阅读量1.2k

点赞数 2

分类专栏：原生js封装文章标签： javascript

本文链接：https://blog.csdn.net/weixin_38675541/article/details/78527878

版权

本文介绍了如何用原生JavaScript实现斗鱼弹幕效果，包括获取弹幕内容，清除输入框，设置弹幕span的显示与移动，以及通过setInterval实现平滑移动。当弹幕移出屏幕时自动删除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生js弹幕效果

- 思路

获取弹幕value，生成弹幕后要清除input里面的value，为下一次生成弹幕做准备
两个时间 keydown click
触发后生成弹幕span,添加到父盒子中appendChild()
初始化span的top和left
使用setInterval(,1000/60)来让弹幕移动
当span移除屏幕时，让其消失，即offsetLeft+offsetWidth<=0时，this.parentNode.removeChild()

    <style type="text/css" media="screen">
        * {
            margin: 0px;
            padding: 0px
        }

        html, body {
            height: 100%
        }

        body {
            overflow: hidden;
            background-color: #FFF;
            text-align: center;
        }

        .flex-column {
            display: flex;
            flex-direction: column;
            justify-content: space-between;align-items: center;
        }

        .flex-row {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .wrap {
            overflow: hidden;
            width: 60%;
            height: 500px;
            margin: 1px auto;
            padding: 20px;
            background-color: transparent;