JQuery弹幕发送


文章目录

  • 前言
  • 一、JQuery是什么?
  • 二、使用步骤
    • 1.实现html代码
    • 2.实现CSS代码
    • 3.引入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
                .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;
}

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

3.引入JQuery包

文件整体架构如下(示例):
JQuery弹幕发送_第1张图片

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

JQuery弹幕发送_第2张图片


总结

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

你可能感兴趣的:(web前端,java,程序人生,windows)