JQuery弹幕发送

最新推荐文章于 2024-04-16 09:35:27 发布

「已注销」

最新推荐文章于 2024-04-16 09:35:27 发布

阅读量5k

点赞数

分类专栏： # 六 web前端+vue 文章标签： java 程序人生 windows

本文链接：https://blog.csdn.net/CNMBZY/article/details/123880156

版权

六 web前端+vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

前言
一、JQuery是什么？
二、使用步骤
总结

前言

初步实现弹幕发送系统，由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){
                //判断键盘按钮是否是13
                if(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;
}