jQuery实现简单的弹幕效果

最新推荐文章于 2022-08-26 16:43:53 发布
最新推荐文章于 2022-08-26 16:43:53 发布
阅读量1.8k 收藏 14
点赞数 4
分类专栏： JS CSS 文章标签： jquery javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42400124/article/details/116664335
版权
JS 同时被 2 个专栏收录
22 篇文章 0 订阅
订阅专栏
CSS
21 篇文章 2 订阅
订阅专栏

jQuery实现简单的弹幕效果

效果演示

jQuery，HTML实现简单的弹幕效果

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>弹幕dome</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<div class="bulletbox" id="bulletbox">
			<div class="bulletboxmin" id="bulletboxmin"></div>
			<div class="bulletbot">
				<div class="bulletbotmin">
					<p>吐槽:</p>
					<input type="text" class="text" id="text" placeholder="火力已加满..." />
					<button type="button" class="btn" id="btn" >发布</button>
				</div>
			</div>
			
		</div>
		
		
	</body>
</html>

css代码

html,body{margin: 0px; padding: 0px; width: 100%; height: 100%; font-family: "微软雅黑";font-size: 100%;}

/* 弹幕 */
.bulletbox{width: 100%;height: 100%;position: relative;background-color: #FFFFFF;overflow: hidden;}
.bulletboxmin{width: 100%;box-sizing: border-box;height: calc(100% - 130px);}
/* bulletbot */
.bulletbot{width: 100%;box-sizing: border-box;position: fixed;bottom: 0;left: 0;background-color: #404060;display: flex;display: -webkit-flex;-webkit-justify-content: center;justify-content: center;}
.bulletbotmin{display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;height: 130px;}
.bulletbotmin p{font-size: 20px;color: #FFFFFF;margin-right: 10px;}
.bulletbotmin input{display: block;width: 400px;height: 50px;outline: none;background-color: #FFFFFF;border: none;border-top-left-radius: 10px;border-bottom-left-radius: 10px;box-sizing: border-box;padding: 0 20px;font-size: 16px;color: #333333;}
.bulletbotmin button{display: block;width: 140px;height: 50px;background-color: #0099CC;border: none;outline: none;border-top-right-radius: 10px;border-bottom-right-radius: 10px;font-size: 16px;color: #FFFFFF;cursor: pointer;}
.bulletbox span{width: 300px; height: 40px; position: absolute; overflow: hidden;font-size: 20px;color: #AFEEEE; line-height: 40px;white-space: nowrap; cursor: pointer;font-weight: bold;}

jQuery代码

$(function(){
	
	$("#btn").click(function(){
		//评论产生的随机高度
		var pageH=parseInt(Math.random()*300);
		//创建span元素（弹幕条）
		var newSpan=$("<span></span>");
		//获取用户输入的字符串
		var str=$("#text").val();
		//为新元素赋值
		newSpan.text(str);
		//每次发表后清空输入框
		$("#text").val("");
		//设置弹幕出现位置
		newSpan.css("left","1400px");
		newSpan.css("top",pageH);
		//设置弹幕颜色
		newSpan.css("color",randomColor());
		//弹幕动画
		newSpan.animate({"left":-500},10000,"linear",function(){
			$(this).remove();
		})
		//弹幕添加
		newSpan.appendTo("#bulletboxmin")
		
	})
	
	//定义一个随机生成颜色的方法
	function randomColor(){
		var colorArr=['pink','red','blue','puper','orange','black','DarkMagenta','DoderBlue','DeepSkyBlue','CadetBlue','DarkSlateGray','Yellow','Tomato','	RosyBrown'];
		var color=parseInt(Math.random()*colorArr.length);
		return colorArr[color];
	}
	
})
Fish北冥
关注
  • 4
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery实现弹幕效果
一行代码
05-22 1万+
话不多说吧，直接看效果吧： 主要思路 其实弹幕的主要思路很简单，就是将div从右向左移动，直到完全移除屏幕之后，将当前div从body中移除，这里我采用了面向对象的思想来处理，具体js代码如下： JS /** * 弹幕 */ $(function () { function BarrageManager (options) { this.opts...
利用jQuery制作简易弹幕效果
小苏(º﹃º )的博客
05-18 533
利用jQuery制作简易弹幕效果实现步骤：1.制作样式2.逻辑，思路 实现步骤： 1.制作样式 我们先来看看body中的代码： <body> <div class="box"> <div class="small"> <div class="div1"> <input type="text"> <span>发射</sp
用jquery简单实现弹幕效果
stj1_的博客
09-23 770
首先html部分 说些什么？ 接下来css部分 #box{ width: 800px; height: 500px; border: 2px solid black; margin: 50px auto; position: relative;
jquery实现简单的弹幕效果
weixin_44200575的博客
09-19 650
jquery实现简单的弹幕效果首先使用HTML创建简单的框架再使用js对HTML框架增加简单的样式思路引入jquery.js在css中设置标签的样式实现弹幕效果 首先使用HTML创建简单的框架 <div class="video"></div> <div class="bt"> <input type="text"><...
jQuery如何实现弹幕效果
weixin_45324878的博客
12-22 1408
用jQuery实现弹幕效果 jQuery弹幕效果 弹幕在日常网络中也比较常见，弹幕的种类也是各式各样的，今天也就简单的做一个普通的弹幕效果。 首选认识一下marquee marquee HTML marquee 元素（） 用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。 属性 behavior:设置文本在 marquee 元素内如何滚动。可选值有 scroll，slide 和 alternate。 如果未指定值，默认值为 scroll。 bgcolor:通过颜色名称或十六进制值设
【JS】jQuery实现弹幕效果
xxxxxwxx的博客
08-26 863
【代码】【JS】jQuery实现弹幕效果。
php+js实现弹幕,jQuery实现简单弹幕效果
weixin_28788983的博客
03-23 155
本文实例为大家分享了jQuery实现弹幕效果的具体代码，供大家参考，具体内容如下话不多说吧，直接看效果吧：主要思路其实弹幕的主要思路很简单，就是将div从右向左移动，直到完全移除屏幕之后，将当前div从body中移除，这里我采用了面向对象的思想来处理，具体js代码如下：JS/*** 弹幕*/$(function () {function BarrageManager (options) {this...
基于jQuery实现弹幕效果
米拉
04-23 2084
效果如下： HTML： <div class="dmbg"> <div class="dmHt"> <img src="images/txt01.png"> <span>已有<b>257864</b>人在此寄托了思念</span> </div> <div class="dmShow"> <!--<div>祝家乡越来越繁荣昌盛，人们的生活也越来越富裕。</div>
使用jQuery实现弹幕效果
red_paper_zj的博客
06-13 325
使用jQuery实现弹幕效果 实现步骤： 1. html结构： <div class="boxDom" id="boxDom"> <div class="idDom" id="idDom"> <div class="content"> <p class="title">弹幕:</p> <input type="text" class="text" id="text" />
html 5的弹幕滚动效果,JQuery简单实现弹幕滑动效果
weixin_42127775的博客
06-04 533
某需求需要这么玩于是写了个，备份用Documentbody {margin: 0px;padding: 0px;}.container {position: relative;background-color:pink;height:500px;width:100%;overflow: hidden;}.danmaku {display: inline-block;position: absolu...
jQuery实现简单弹幕效果
10-15
主要为大家详细介绍了jQuery实现简单弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery实现弹幕效果
10-20
本文主要分享了jQuery实现弹幕效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
jquery实现直播弹幕效果
10-15
主要为大家详细介绍了jquery实现直播弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery实现的弹幕效果完整实例
10-19
主要介绍了jQuery实现的弹幕效果,结合完整实例形式分析了jQuery通过结合时间函数控制输入文字与样式的渐变实现弹幕效果,需要的朋友可以参考下
简单实现jQuery弹幕效果
10-19
本文将详细介绍如何使用jQuery库来简单地实现弹幕效果。 #### 二、环境搭建 为了实现弹幕效果，我们需要搭建一个基本的HTML页面，并引入jQuery库。这里使用了百度提供的jQuery CDN链接。以下为HTML结构的基础部分：...
HTML，JS信息表单注册，点击获取验证码
qq_42400124的博客
05-07 2680
HTML，JS信息表单注册，点击获取验证码 效果图 效果演示 HTML代码 <div class="modal_content"> <h5>绑定手机号</h5> <div> <label for="phone1">注册手机号：</label><br /> <input id="phone1" type="text" autocomplete="off" placeholder="请输入手机号"/&gt
jQuery增删改查
qq_42400124的博客
09-07 2209
jQuery增删改查（图书管理） 演示效果： HTML代码： <div class="books"> <h3 class="titl">图书管理</h3> <table cellspacing="0" cellpadding="0"> <thead> <tr> <th><input type="checkbox" id="all" /></th> <th>作者
vue图片无缝轮播/切换
qq_42400124的博客
06-29 2133
vue图片无缝轮播/切换 演示效果： HTML代码： <!-- vueswiper --> <div class="vueswiperwrap"> <div class="vueswiper"> <div class="item" v-for="i in imgArr" :transition="need" v-show="index==$index?true:false"> <img :src="i" @click="bling()" /&
使用Javascript+jquery完成视频弹幕效果
最新发布
06-11
视频弹幕效果可以通过 JavaScript 和 jQuery 实现，具体实现步骤如下： 1. 创建弹幕元素 首先，在视频播放器下方创建一个 div 元素，用于显示弹幕，将其样式设置为绝对定位，宽度为视频播放器的宽度，高度为弹幕字体大小的两倍，背景色为透明。 ```html <div id="danmu-container"></div> ``` ```css #danmu-container { position: absolute; bottom: 0; width: 100%; height: 2em; background-color: transparent; overflow: hidden; } ``` 2. 发送弹幕 使用 jQuery 监听发送按钮的点击事件，获取文本框中的弹幕内容，并动态创建一个 span 元素，设置其样式和文本内容，将其添加到弹幕容器内，设置其初始位置为容器的右侧，使用 animate() 方法实现弹幕的滚动效果。 ```html <input type="text" id="danmu-input"> <button id="danmu-send">发送</button> ``` ```javascript $('#danmu-send').click(function() { var content = $('#danmu-input').val(); if (content) { var $danmu = $('<span>' + content + '</span>'); $danmu.css({ position: 'absolute', top: Math.random() * ($('#danmu-container').height() - 30) + 'px', right: 0, fontSize: '1em', whiteSpace: 'nowrap', color: '#fff' }); $('#danmu-container').append($danmu); $danmu.animate({ right: $('#danmu-container').width() }, 10000, function() { $(this).remove(); }); $('#danmu-input').val(''); } }); ``` 3. 暂停弹幕 使用 jQuery 监听视频播放器的暂停事件，遍历弹幕容器内的所有弹幕元素，使用 stop() 方法停止弹幕的滚动动画，即可实现暂停弹幕的效果。 ```javascript $('#video-player').on('pause', function() { $('#danmu-container span').stop(); }); ``` 以上就是使用 JavaScript 和 jQuery 实现视频弹幕效果的基本步骤，可以根据需要进行功能扩展和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值