前言

初步实现弹幕发送系统，由html构成页面框架，由css修饰页面形态，用引用JQuery类库的形式，初步运行时候出现了一些错误，所以借鉴某大哥的思路：

当点击发送弹幕后，就动态创建一个新的span，加到存放视频的div里面。span需要定位在div的右侧，
具体位置可以随机或者指定一个范围，然后添加动画让span移动到div的左侧。发送字幕的颜色和位置随机，不固定。*

一、JQuery是什么？

JQuery是一个javaScript库，语法简洁，核心代码仅仅一万多行，极大的简化了js操作DOM，处理事件，执行动画等操作，强调的理念是“写的少，做的多”，推荐大家阅读一下jquery.js的源码，十分的简洁，代码可读性比较好。

二、使用步骤

1.实现html代码

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/style.css"><script src="js/jquery-3.5.1.js"></script><script>$(function(){//设置随机生成颜色组function randomColor() {var r = parseInt(Math.random() * 256);var g = parseInt(Math.random() * 256);var b = parseInt(Math.random() * 256);return 'rgb(' + r + ',' + g + ',' + b + ')';}//点击按钮事件$('button').click(function(){//准备生成的span的上下随机位置var randomTop = Math.random() * $('.video').height();$('<span></span>')                //创建span.text( $('input').val() )         //设置输入内容.css({//修改css内容position: 'absolute',      //定位span在右侧right: -100,  top: randomTop,color:randomColor(),        //颜色随机whiteSpace: "nowrap"        // 强制一行显示，这个是必备的，不然文字跑到左边的时候回自动换行}).animate({right: $(".video").width()},5000,'linear',function(){     //添加动画，从右-10px，到video宽度，动画的时间，匀速$(this).remove()           //当span的动画完成后，需要删除}).appendTo( $('.video') )       //将span添加到video中$('input').val('')          //发送弹幕之后，清空input输入框内容})//回车键实现发布功能$('input').keydown(function(e){//判断键盘按钮是否是13if(e.keyCode == 13){$('button').click();}})})</script></head><body><div class="danmu"><div class="video"></div><div class="con"><span>吐槽:</span><input type="text" placeholder="请输入内容" /><button>发布</button></div></div>
</body>

2.实现CSS代码

代码如下（示例）：

.video {width: 500px;height: 400px;margin: 0 auto;background: pink;overflow: hidden;position: relative;
}.con {width: 500px;margin: 0 auto;text-align: center;padding: 10px 20px;line-height: 30px;display: flex;background: thistle;box-sizing: border-box;
}.con input {height: 30px;line-height: 30px;outline: none;border: 1px solid #ccc;box-sizing: border-box;margin-left: 10px;padding-left: 10px;
}.con button {width: 60px;height: 30px;line-height: 30px;cursor: pointer;outline: none;background: palevioletred;border: 1px solid saddlebrown;color: #fff;
}

该处使用的url网络请求的数据。

3.引入JQuery包

文件整体架构如下（示例）：

点击发送，该处使用的文件位置连接请求的数据。

总结

以上就是今天要讲的内容，本文仅仅简单介绍了JQuery形成一个体系的基本架构，也就是传统的三大件全部凑齐

JQuery弹幕发送相关推荐

jQuery弹幕（兼容IE8）
超简单的jQuery弹幕,支持IE8!!! <!DOCTYPE html> <html><head><meta charset="UTF-8&quo ...
微信小程序视频弹幕发送
文章目录 1. 目录结构 2. videoDanmu 3. selectColor 4. 效果图 1. 目录结构 2. videoDanmu  <video ...
jQuery,Ashx发送站内信
之前的项目有个发送站内短信的功能,今天闲来无事,就修改了一下程序,用jquery+ashx来实现一下,无刷新发送留言,欢迎大家拍砖. 1.验证码实现: 代码 <%@ WebHandler Lan ...
html post 发送两次,jQuery Ajax发送两次第二次提交,发送三次三次
我有一个php文件" popup_or_abbort.php".如果用户已经有一个请求,则该请求将被取消,并且db中的行将使用mysql_query删除.如果我是第一次访问该页面并 ...
如何在jQuery中发送PUT / DELETE请求？
GET : $.get(..) POST : $.post().. 那PUT/DELETE呢? #1楼您可以在数据哈希中包含一个名为:_method的键,其值为'delete'. 例如: data ...
jQuery弹幕插件
原文地址:http://www.jq22.com/jquery-info2123 插件描述:在网页上实现弹幕功能,类似于Bilibili等视频弹幕网站上的弹幕功能.彩色弹幕.顶端底端弹幕.自定义弹幕速 ...
使用JQuery Ajax发送FormData数据
视图页面的代码 1.先创建一个FormData:var form = new FormData(); 2.然后进行数据的封装:form.append("封装数据的名字",数据),例 ...
jquery弹幕效果
html页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)
根据视频进行整理 [https://www.bilibili.com/video/BV1WC4y1b78y?p=1] 视频资料百度网盘: 链接:[https://pan.baidu.com/s/1n ...

JQuery弹幕发送

文章目录

前言