jq编写弹幕功能

最新推荐文章于 2023-11-28 17:53:15 发布

weixin_45691601

最新推荐文章于 2023-11-28 17:53:15 发布

阅读量136

点赞数 3

本文链接：https://blog.csdn.net/weixin_45691601/article/details/116333342

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			#header {
				width: 100vw;
				height: 100vh;
				background-color: rgba(0,0,0,0.6);
				position: fixed;
				left: 0;
				top: 0;
			}

			.danMuItem {
				/* background-color: #333333; */
				/* color: #fff; */
				position: absolute;
				width: auto;
				white-space: nowrap;
				padding: 5px;
				border-radius: 10px;
				/* background-color: rgba(0, 0, 0, 0.5); */
				z-index: 2;
			}
			#header .danMuStyle0{
				color:#333;
				background-color:rgba(255,255,255,0.8)
			}
			#header .danMuStyle1{
				color:#ff5857;
				background-color:#3385ff
			}
			#header .danMuStyle2{
				color:#800080;
				background-color:#fa2121
			}
		</style>
	</head>
	<body>


		<div id="header">

		</div>


		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {

				// 弹幕功能

				let arrlist = [],//弹幕数据
					weiZhi = [
						{
							top: "10",
							isOk: true,
							index: 0
						},
						{
							top: "65",
							isOk: true,
							index: 1
						},

						{
							top: "125",
							isOk: true,
							index: 2
						},

						{
							top: "200",
							isOk: true,
							index: 3
						}
					],//弹幕出现的位置
					danMuStyleNum=3,//样式种类数目
					sendIndex = undefined;//下一条弹幕的索引

				// 加载每行的Dom父节点
				$.each(weiZhi, (index, item) => {
					let $item = `
						<div class="danMu${index}"></div>
					`;
					$("#header").append($item);
					$($item).ready(function() {
						if (index == weiZhi.length - 1) {
							getList().then(resList => {
								arrlist = resList;
								gun();
							}).catch(() => {
								danMuTimer();
							})
						}
					})
				})
				// 获取两个数之间的随机整数
				function getRandom(min, max) {
					return Math.floor(Math.random() * (max - min+1)) + min
				}
				// 重新获取数据渲染
				function danMuTimer() {
					setTimeout(() => {
						getList().then(resList => {
							arrlist = resList;
							gun();
						}).catch(() => {
							danMuTimer();
						})
					}, 5000)
				}
				// 获取弹幕内容
				function getList() {
					return new Promise((resolve, reject) => {
						let list = [{
								name: "小明",
								prize: "兰博基尼一辆"
							},
							{
								name: "小红",
								prize: "卫龙辣条一包"
							},
							{
								name: "王富贵",
								prize: "一朵小红花"
							},
							{
								name: "老张",
								prize: "茅台一箱"
							}
						]; //模拟数据
						resolve(list)
					})
				}
				// 从第几行出来
				function weiZhiIndex() {
					let remainList = weiZhi.filter(item => item.isOk);
					if (remainList.length == 0) {
						return null
					} else {
						if (remainList.length == 1) {
							return remainList[0].index
						} else {
							return remainList[getRandom(0, remainList.length-1 )].index
						}
					}
				}
				// 开始滚动
				function gun() {
					setInterval(() => {
						let wei = weiZhiIndex();
						// console.log(wei)
						if (wei != null) {
							// console.log("可以")
							weiZhi[wei].isOk = false;

							if (sendIndex == undefined) {
								sendIndex = 0
							} else {
								sendIndex += 1;
								if (sendIndex > arrlist.length - 1) {
									// return danMuTimer();
									sendIndex = 0; //循环出现
								}
							}
							let item1 = arrlist[sendIndex];
							// let styleClass=styleList[getRandom(0,danMuStyleNum-1)];
							// console.log(getRandom(0,danMuStyleNum-1))
							let classNum=getRandom(0,danMuStyleNum-1);
							// console.log(classNum)
							let $item = $(
								`
									<div class="danMuItem danMuStyle${classNum}" data-wei="${wei}">
										恭喜${item1.name}获取到${item1.prize}
									</div> 
								`
							);
							// console.log($item)
							// console.log(sendIndex)
							$(`#header .danMu${wei}`).append($item);
							// console.log($item.width());
							$item.css({
								"left": $("#header").width() + "px",
								"top": weiZhi[wei].top + "px"
							});
							// console.log($item.width())
							let scrollTimer = setInterval(() => {
								$item.css({
									"left": $item.position().left - 1 + "px"
								});
								if ($item.position().left <= -$item.width()) {
									clearInterval(scrollTimer)
									$item.remove();
								}
								let weis = $item.attr("data-wei");

								if (($item.index() == $(`#header .danMu${weis}`).children().length - 1) && $("#header").width() - $item.position()
									.left - $item.width() >= getRandom(40, 60)) {
									weiZhi[weis].isOk = true;
								}
								if (($item.index() == $(`#header .danMu${weis}`).children().length - 1) && $item.position().left <= -
									$item.width()) {
									// weiZhi[weis].isOk = true;				
									clearInterval(scrollTimer)
									$item.remove();
								}
							}, 50)
						}
					}, 3000)
				}
			})
		</script>

	</body>
</html>

weixin_45691601

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jq编写弹幕功能

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #header { width: 100vw;
复制链接

扫一扫