一篇文章教你学会js实现弹幕效果

2024-10-17 20:57:00

新建一个html文件：

哈哈哈，大家别像我一样用中文命名。

中文命名是不合规范的，行走江湖，大佬们看见你的中文命名会笑话你的。

上图中，我们引入了jquery插件，没错我们用jq写，回归原始（找不到cdn链接的小伙伴可以百度bootcdn，在里面搜索jquery）。并且取了个弹幕网的标题。

建好html文件，搞出初始模版

在这里不得不提一句，我推荐前端开发的小伙伴们用vscode来开发，很好用的。

一个小技巧：在空白html文件输入!会自动帮你初始化html模板

模板已经建立完毕，并且引入jquery后，正文开始了：

HTML添加

<body>
    <div class="con">
        <div id="screen">
            <div class="dm_show">
                <!-- <div>text message</div> -->
            </div>
        </div>
        <div class="edit">
            <p class="msg">
                <input placeholder="说点什么吧？" class="content" type="text" />
            </p>
            <p class="btns">
                <input type="button" class="send" value="发送" />
                <input type="button" class="clear" value="清屏" />
            </p>
        </div>
    </div>
</body>

一段朴实无华的html。

再来写好css：

CSS填充

<style>
    .con {
        background-color: floralwhite;
        padding: 40px 80px 80px;
    }

    #screen {
        background-color: #fff;
        width: 100%;
        height: 380px;
        border: 1px solid rgb(229, 229, 229);
        font-size: 14px;
    }

    .content {
        border: 1px solid rgb(204, 204, 204);
        border-radius: 3px;
        width: 320px;
        height: 35px;
        font-size: 14px;
        margin-top: 30px;
    }

    .send {
        border: 1px solid rgb(230, 80, 30);
        color: rgb(230, 80, 0);
        border-radius: 3px;
        text-align: center;
        padding: 0;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        width: 159px;
        background-color: white;
    }

    .clear {
        border: 1px solid;
        color: darkgray;
        border-radius: 3px;
        text-align: center;
        padding: 0;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        width: 159px;
        background-color: white;
    }

    .edit {
        margin: 20px;
        text-align: center;
    }

    .edit .btns{
        margin-top: 20px;
    }

    .edit .msg input{
        padding-left: 5px;
    }

    .text {
        position: absolute;
    }

    * {
        margin: 0;
        padding: 0;
    }

    .dm_show {
        margin: 30px;
    }
</style>

看看效果：

整体结构已经出来了，下面就是真二八经的js：

js逻辑代码

<script>
    $(function () {
        //设置“发送”按钮点击事件，将弹幕体显示在弹幕墙上
        $('.send').click(function () {
            //获取文本输入框的内容
            var val = $('.content').val();
            //将文本框的内容赋值给val后，将文本框的内容清除，以便用户下一次输入
            $('.content').val('');
            //将文本框内容用div包裹起来，便于后续处理
            var $content = $('<div class="text">' + val + '</div>');
            //获取弹幕墙对象
            $screen = $(document.getElementById("screen"));
            //设置弹幕体出现时的上边距，为任意值
            var top = Math.random() * $screen.height() + 40;
            //设置弹幕体的上边距和左边距
            $content.css({
                top: top + "px",
                left: 80
            });
            //将弹幕体添加到弹幕墙中
            $('.dm_show').append($content);
            //弹幕体从左端移动到最右侧，时间为8秒，然后直接删除该元素
            $content.animate({
                left: $screen.width() + 80 - $content.width()
            }, 8000, function () {
                $(this).remove();
            });
        });
        //设置“清屏”点击事件，清除弹幕墙中的所有内容
        $('.clear').click(function () {
            $('.dm_show').empty();
        });
    });
</script>

意外吗？就这么几行，哈哈哈。注

释里写的很详细，小伙伴们可以好好看来看，这里我给大家演示演示：

动画效果

请原谅我这糟糕的画质，还好不影响看效果，这里只是简单的实现了一个弹幕的效果，还不能够达到企业级的应用，有需求的也可以自行完善，道理就是这么个道理，嘿嘿。

如果企业级视频弹幕的话，这里也推荐dplayer播放器，一个非常完美的播放器。

关于前端弹幕的讨论就差不多到此了，以上就是一篇文章教你学会用js实现弹幕效果的详细内容，更多关于js实现弹幕的资料请关注我们其它相关文章！

简单实现JavaScript弹幕效果

不知大家有没有感受到,弹幕又是另一出好戏!! 不过我个人还是比较排斥看电视的时候被出来的弹幕打扰.今天我们来写一个简单的弹幕.简单到什么程度呢?看下效果: 由图可以看出,我们的呆毛html结构确实是非常简单啦. 就是由一个div.一个input框另加一个button组成. <div id="box" class="box"></div> <input type="text" id="txt" /&
基于JavaScript实现弹幕特效

本文实例为大家分享了js实现弹幕特效的具体代码,供大家参考,具体内容如下此处使用HBuilder编译,最简单的弹幕效果,希望各位前辈不吝指教. 注意用的是jquery-2.0.3.js <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css&
原生js实现弹幕效果

本文实例为大家分享了js实现弹幕效果的具体代码,供大家参考,具体内容如下效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>原生js实现弹幕效果</title> <style> * { padding:0; margin:0; } .all { width:600px; height:400px; backgr
javascript实现弹幕墙效果

刚开始入门前端,想仿照FreeCodeCamp中的一个项目制作简单的弹幕墙. 步骤如下: 1.编写HTML代码: 创建一个弹幕显示墙,以及两个按钮,分别为"发送"和"清屏",并在文本框中设置placeholder为"说点什么吧?"以提示用户在此输入弹幕信息. <body> <div class="con"> <div id="screen"> <div class=
一篇文章教你学会js实现弹幕效果

目录新建一个html文件: 建好html文件,搞出初始模版 HTML添加 CSS填充 js逻辑代码动画效果下面是弹幕效果 : 相信小伙伴们都看过了,那么它实现的原理是什么呢,那么我们前端怎么用我们web技术去实现呢?? 新建一个html文件: 哈哈哈,大家别像我一样用中文命名. 中文命名是不合规范的,行走江湖,大佬们看见你的中文命名会笑话你的. 上图中,我们引入了jquery插件,没错我们用jq写,回归原始(找不到cdn链接的小伙伴可以百度bootcdn,在里面搜索jquery).并且取了
一篇文章教你学会使用Python绘制甘特图

目录优点局限一日一书用来制作甘特图的专业工具也不少,常见的有:Microsoft Office Project.GanttProject.WARCHART XGantt.jQuery.Gantt.Excel等,网络上也有一些优质工具支持在线绘制甘特图. 可是这种现成的工具,往往也存在一些弊端,让编程人员不知所措.比如说,花里胡哨的UI,让人目不暇接,不知点哪个才好: 比如说,有些基于浏览器的图表需要掌握HTML.JS等编程语言,只会点Python的我直接被劝退: 再比如,进来就是注册.登
一篇文章教你使用SpringBoot如何实现定时任务

前言在 Spring + SpringMVC 环境中,一般来说,要实现定时任务,我们有两中方案,一种是使用 Spring 自带的定时任务处理器 @Scheduled 注解,另一种就是使用第三方框架 Quartz ,Spring Boot 源自 Spring+SpringMVC ,因此天然具备这两个 Spring 中的定时任务实现策略,当然也支持 Quartz,本文我们就来看下 Spring Boot 中两种定时任务的实现方式. 一.第一种方式:@Scheduled 使用 @Scheduled
原生JS实现弹幕效果的简单操作指南

前言现在很多的直播平台或者视频平台都会用到弹幕加强和观众的互动效果,那么如何用JS实现这样的效果呢,用一个初学者的方法记录下这个方法,欢迎大牛指导. 1.首先需要操作文档必须拿到Dom中的元素,当然有很多方法,这里还是用document.querySelector. 2.这边也是为了键盘和鼠标都可发送封装了一个函数function sendMsg(){ 首先需要创建一个容器来接受你编辑的内容,这里用span标签,当然其他标签也可 var oSpan=document.cerateElement
一篇文章教你JS函数继承

目录一. 前言: 二.原型链继承: 三.借用构造函数继承(对象伪装): 四.组合继承: 五.寄生组合继承: 六.class继承: 七.总结: 一. 前言: Hello,大家最近过得好吗,
一篇文章教你3分钟如何发布Qt程序

导读:Qt程序编写好以后该如何发布.本文教你使用Qt自带工具windeployqt来进行操作. 本文字数:500,阅读时长大约:3分钟 (1)编写一个简单的程序我们先做一个简单的窗口,添加一个图片资源文件,放置到窗口当中. 选择添加Qt Resource File文件类型选择资源文件的路径,并为它命名点击完成设置资源前缀,如果资源层次不是很复杂的话,可以只设置一层,用"/"表示点击Add Files添加一个图片文件在主窗口中添加一个 Tool Button,设置刚才的图片为
一篇文章教你用python画动态爱心表白

初级画心学Python,感觉你们的都好复杂,那我来个简单的,我是直接把心形看作是一个正方形+两个半圆: 于是这就很简单了,十行代码解决: import turtle as t t.pensize(2) # 笔大小2像素 t.pencolor("red") # 颜色为红色 t.left(45) # 45度 t.fd(200) # 向前200直线 t.circle(100, 180) # 画一圆半径100 弧度180 t.right(90) # 向右90度 t.circle(100, 1
一篇文章教你如何在SpringCloud项目中使用OpenFeign

目录 OpenFeign的介绍 OpenFeign是一种声明式 .模板化的HTTP客户端. OpenFeign与Feign的之间的关系 OpenFegin中的两个常用注解在项目中使用OpenFeign 调用关系图导入依赖使用注解@FeignClient @EnableFeignClients 注入对象.调用总结: OpenFeign的介绍 OpenFeign是一种声明式 .模板化的HTTP客户端. 何为声明式? 就像调用本地方法一样调用远程方法,无需感知操作远程http请求. 何为模板化
一篇文章教你用React实现菜谱系统

目录一.菜谱大全 1.1.项目背景 1.2.技术栈 1.3.开发环境 1.4.项目效果展示 1.5.项目初始化二.首页开发 2.1.antd-mobile 组件库 2.2.底部导航实现 2.3.菜谱大全顶部导航 2.4.轮播显示 2.5.mock 数据 2.6.搜索组件 2.7.热门分类 2.8.精品好菜三.分类开发 3.1.分类顶部切换 3.2.列表展示总结一.菜谱大全 1.1.项目背景当下回家吃饭健康饮食的理念正在兴起.据调查显示,有超过九成的都市白领及年轻人其实都倾向于在家里吃